diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 000000000..1d539a54e
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,732 @@
+
+# Makepad Project Guide
+
+## Important: When Converting Syntax
+
+**Always search for existing usage patterns in the NEW crates (widgets, code_editor, studio) before making syntax changes.** The old `widgets` and `live_design!` syntax is deprecated. When unsure about the correct syntax for something, grep for similar usage in `widgets/src/` to find the correct pattern.
+
+```bash
+# Example: find how texture declarations work in new system
+grep -r "texture_2d" widgets/src/
+```
+
+**Critical: Always use `Name: value` syntax, never `Name = value`.** The old `Key = Value` syntax no longer works. For named widget instances, use `name := Type{...}` syntax.
+
+## Running UI Programs
+
+```bash
+RUST_BACKTRACE=1 cargo run -p makepad-example-splash --release & PID=$!; sleep 15; kill $PID 2>/dev/null; echo "Process $PID killed"
+```
+
+## Cargo.toml Setup
+
+```toml
+[package]
+name = "makepad-example-myapp"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+makepad-widgets = { path = "../../widgets" }
+```
+
+
+## Widgets DSL (script_mod!)
+
+The new DSL uses `script_mod!` macro with runtime script evaluation instead of the old `live_design!` compile-time macros.
+
+### Imports and App Setup
+
+```rust
+use makepad_widgets::*;
+
+app_main!(App);
+
+script_mod!{
+    use mod.prelude.widgets.*
+    
+    load_all_resources() do #(App::script_component(vm)){
+        ui: Root{
+            main_window := Window{
+                window.inner_size: vec2(800, 600)
+                body +: {
+                    // UI content here
+                }
+            }
+        }
+    }
+}
+
+impl App {
+    fn run(vm: &mut ScriptVm) -> Self {
+        crate::makepad_widgets::script_mod(vm);  // Register all widgets
+        // Platform-specific initialization goes here (e.g., vm.cx().start_stdin_service() for macos)
+        App::from_script_mod(vm, self::script_mod)
+    }
+}
+
+#[derive(Script, ScriptHook)]
+pub struct App {
+    #[live] ui: WidgetRef,
+}
+
+impl MatchEvent for App {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        // Handle widget actions
+    }
+}
+
+impl AppMain for App {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
+        self.match_event(cx, event);
+        self.ui.handle_event(cx, event, &mut Scope::empty());
+    }
+}
+```
+
+### Available Widgets (widgets/src/lib.rs)
+
+Core: `View`, `SolidView`, `RoundedView`, `ScrollXView`, `ScrollYView`, `ScrollXYView`
+Text: `Label`, `H1`, `H2`, `H3`, `LinkLabel`, `TextInput`
+Buttons: `Button`, `ButtonFlat`, `ButtonFlatter`
+Toggles: `CheckBox`, `Toggle`, `RadioButton`
+Input: `Slider`, `DropDown`
+Layout: `Splitter`, `FoldButton`, `FoldHeader`, `Hr`
+Lists: `PortalList`
+Navigation: `StackNavigation`, `ExpandablePanel`
+Overlays: `Modal`, `Tooltip`, `PopupNotification`
+Dock: `Dock`, `DockSplitter`, `DockTabs`, `DockTab`
+Media: `Image`, `Icon`, `LoadingSpinner`
+Special: `FileTree`, `PageFlip`, `CachedWidget`
+Window: `Window`, `Root`
+Markup: `Html`, `Markdown` (feature-gated)
+
+### Widget Definition Pattern
+
+```rust
+// Rust struct
+#[derive(Script, ScriptHook, Widget)]
+pub struct MyWidget {
+    #[source] source: ScriptObjectRef,  // Required for script integration
+    #[walk] walk: Walk,
+    #[layout] layout: Layout,
+    #[redraw] #[live] draw_bg: DrawQuad,
+    #[live] draw_text: DrawText,
+    #[rust] my_state: i32,  // Runtime-only field
+}
+
+// For widgets with animations, add Animator derive:
+#[derive(Script, ScriptHook, Widget, Animator)]
+pub struct AnimatedWidget {
+    #[source] source: ScriptObjectRef,
+    #[apply_default] animator: Animator,
+    // ...
+}
+```
+
+### Script Module Structure
+
+```rust
+script_mod!{
+    use mod.prelude.widgets_internal.*  // For internal widget definitions
+    use mod.widgets.*                    // Access other widgets
+    
+    // Register base widget (connects Rust struct to script)
+    mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))
+    
+    // Create styled variant with defaults
+    mod.widgets.MyWidget = set_type_default() do mod.widgets.MyWidgetBase{
+        width: Fill
+        height: Fit
+        padding: theme.space_2
+        
+        draw_bg +: {
+            color: theme.color_bg_app
+        }
+    }
+}
+```
+
+### Key Syntax Differences (Old vs New)
+
+| Old (live_design!) | New (script_mod!) |
+|-------------------|-------------------|
+| `<BaseWidget>` | `mod.widgets.BaseWidget{ }` |
+| `{{StructName}}` | `#(Struct::register_widget(vm))` |
+| `(THEME_COLOR_X)` | `theme.color_x` |
+| `<THEME_FONT>` | `theme.font_regular` |
+| `instance hover: 0.0` | `hover: instance(0.0)` |
+| `uniform color: #fff` | `color: uniform(#fff)` |
+| `draw_bg: { }` (replace) | `draw_bg +: { }` (merge) |
+| `default: off` | `default: @off` |
+| `fn pixel(self)` | `pixel: fn()` |
+| `item.apply_over(cx, live!{...})` | `script_apply_eval!(cx, item, {...})` |
+
+### Runtime Property Updates with script_apply_eval!
+
+Use `script_apply_eval!` macro to dynamically update widget properties at runtime:
+```rust
+// Old system (live! macro with apply_over)
+item.apply_over(cx, live!{
+    height: (height)
+    draw_bg: {is_even: (if is_even {1.0} else {0.0})}
+});
+
+// New system (script_apply_eval! macro)
+script_apply_eval!(cx, item, {
+    height: #(height)
+    draw_bg: {is_even: #(if is_even {1.0} else {0.0})}
+});
+
+// For colors, use #(color) syntax
+let color = self.color_focus;
+script_apply_eval!(cx, item, {
+    draw_bg: {
+        color: #(color)
+    }
+});
+```
+
+Note: In `script_apply_eval!`, use `#(expr)` for Rust expression interpolation instead of `(expr)`.
+
+### Theme Access
+
+Always use `theme.` prefix:
+```rust
+color: theme.color_bg_app
+padding: theme.space_2
+font_size: theme.font_size_p
+text_style: theme.font_regular
+```
+
+### Property Merging with `+:`
+
+The `+:` operator merges with parent instead of replacing:
+```rust
+mod.widgets.MyButton = mod.widgets.Button{
+    draw_bg +: {
+        color: #f00  // Only overrides color, keeps other draw_bg properties
+    }
+}
+```
+
+### Shader Instance vs Uniform
+
+- `instance(value)` - Per-draw-call value (can vary per widget instance)
+- `uniform(value)` - Shared across all instances using same shader
+
+```rust
+draw_bg +: {
+    hover: instance(0.0)           // Each button has its own hover state
+    color: uniform(theme.color_x)  // Shared base color
+    color_hover: instance(theme.color_y)  // Per-instance if color varies
+}
+```
+
+### Animator Definition
+
+```rust
+animator: Animator{
+    hover: {
+        default: @off
+        off: AnimatorState{
+            from: {all: Forward {duration: 0.1}}
+            apply: {
+                draw_bg: {hover: 0.0}
+                draw_text: {hover: 0.0}
+            }
+        }
+        on: AnimatorState{
+            from: {all: Snap}  // Instant transition
+            apply: {
+                draw_bg: {hover: 1.0}
+                draw_text: {hover: 1.0}
+            }
+        }
+    }
+}
+```
+
+### Shader Functions
+
+```rust
+draw_bg +: {
+    pixel: fn() {
+        let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+        sdf.box(0.0, 0.0, self.rect_size.x, self.rect_size.y, 4.0)
+        sdf.fill(self.color.mix(self.color_hover, self.hover))
+        return sdf.result
+    }
+}
+```
+
+Note: Use `.method()` not `::method()` in shaders.
+
+### Color Mixing (Method Chaining)
+
+```rust
+// Old nested style (avoid)
+mix(mix(mix(color1, color2, hover), color3, down), color4, focus)
+
+// New chained style (preferred)
+color1.mix(color2, hover).mix(color3, down).mix(color4, focus)
+```
+
+### App Structure Pattern
+
+```rust
+script_mod!{
+    use mod.prelude.widgets.*
+    
+    load_all_resources() do #(App::script_component(vm)){
+        ui: Root{
+            main_window := Window{
+                window.inner_size: vec2(1000, 700)
+                body +: {
+                    // Your UI here
+                    MyWidget{}
+                }
+            }
+        }
+    }
+}
+
+impl App {
+    fn run(vm: &mut ScriptVm) -> Self {
+        crate::makepad_widgets::script_mod(vm);
+        // Platform-specific initialization (e.g., vm.cx().start_stdin_service() for macos)
+        App::from_script_mod(vm, self::script_mod)
+    }
+}
+
+#[derive(Script, ScriptHook)]
+pub struct App {
+    #[live] ui: WidgetRef,
+}
+
+impl MatchEvent for App {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        if self.ui.button(ids!(my_button)).clicked(actions) {
+            log!("Button clicked!");
+        }
+    }
+}
+
+impl AppMain for App {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
+        self.match_event(cx, event);
+        self.ui.handle_event(cx, event, &mut Scope::empty());
+    }
+}
+```
+
+### Widget ID References
+
+Use `:=` for named widget instances:
+```rust
+// In DSL
+my_button := Button{text: "Click"}
+
+// In Rust code
+self.ui.button(ids!(my_button)).clicked(actions)
+```
+
+### Template Definitions in Dock
+
+Templates inside Dock are local; use `let` bindings at script level for reusable components:
+```rust
+script_mod!{
+    // Reusable at script level
+    let MyPanel = SolidView{
+        width: Fill
+        height: Fill
+        // ...
+    }
+    
+    // Use directly
+    body +: {
+        MyPanel{}  // Works because it's a let binding
+    }
+}
+```
+
+### Custom Draw Widget Example
+
+```rust
+#[derive(Script, ScriptHook, Widget)]
+pub struct CustomDraw {
+    #[walk] walk: Walk,
+    #[layout] layout: Layout,
+    #[redraw] #[live] draw_quad: DrawQuad,
+    #[rust] area: Area,
+}
+
+impl Widget for CustomDraw {
+    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, self.layout);
+        let rect = cx.turtle().rect();
+        self.draw_quad.draw_abs(cx, rect);
+        cx.end_turtle_with_area(&mut self.area);
+        DrawStep::done()
+    }
+    
+    fn handle_event(&mut self, _cx: &mut Cx, _event: &Event, _scope: &mut Scope) {}
+}
+```
+
+### Script Object Storage: map vs vec
+
+In script objects, properties are stored in two different places:
+- **`map`**: Contains `key: value` pairs (regular properties)
+- **`vec`**: Contains named template items (via `:=` syntax)
+
+This distinction is important when working with `on_after_apply` or inspecting script objects directly.
+
+### Templates in List Widgets (PortalList, FlatList)
+
+In list widgets, named IDs (using `:=`) define **templates** that are stored in the widget's `templates` HashMap. These are NOT regular properties - they go into the script object's vec and are collected via `on_after_apply`.
+
+```rust
+// In script_mod! - defining templates for a list
+my_list := PortalList {
+    // Regular properties (go into struct fields)
+    width: Fill
+    height: Fill
+    scroll_bar: mod.widgets.ScrollBar {}
+    
+    // Templates (named with :=) - stored in templates HashMap, NOT struct fields
+    Item := View {
+        height: 40
+        title := Label { text: "Default" }
+    }
+    Header := View {
+        draw_bg: { color: #333 }
+    }
+}
+```
+
+The templates are collected in `on_after_apply`:
+```rust
+impl ScriptHook for PortalList {
+    fn on_after_apply(&mut self, vm: &mut ScriptVm, apply: &Apply, scope: &mut Scope, value: ScriptValue) {
+        if let Some(obj) = value.as_object() {
+            vm.vec_with(obj, |_vm, vec| {
+                for kv in vec {
+                    if let Some(id) = kv.key.as_id() {
+                        self.templates.insert(id, kv.value);
+                    }
+                }
+            });
+        }
+    }
+}
+```
+
+Then used during drawing:
+```rust
+while let Some(item_id) = list.next_visible_item(cx) {
+    let item = list.item(cx, item_id, id!(Item));
+    item.label(ids!(title)).set_text(cx, &format!("Item {}", item_id));
+    item.draw_all(cx, &mut Scope::empty());
+}
+```
+
+**Key distinction**: Regular properties like `scroll_bar: mod.widgets.ScrollBar {}` are applied directly to struct fields. Template definitions like `Item := View {...}` are stored separately for dynamic instantiation.
+
+### PortalList Usage
+
+```rust
+#[derive(Script, ScriptHook, Widget)]
+pub struct MyList {
+    #[deref] view: View,
+}
+
+impl Widget for MyList {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        while let Some(item) = self.view.draw_walk(cx, scope, walk).step() {
+            if let Some(mut list) = item.borrow_mut::<PortalList>() {
+                list.set_item_range(cx, 0, 100);  // 100 items
+                
+                while let Some(item_id) = list.next_visible_item(cx) {
+                    let item = list.item(cx, item_id, id!(Item));
+                    item.label(ids!(title)).set_text(cx, &format!("Item {}", item_id));
+                    item.draw_all(cx, &mut Scope::empty());
+                }
+            }
+        }
+        DrawStep::done()
+    }
+}
+```
+
+### FileTree Usage
+
+```rust
+impl Widget for FileTreeDemo {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        while self.file_tree.draw_walk(cx, scope, walk).is_step() {
+            self.file_tree.set_folder_is_open(cx, live_id!(root), true, Animate::No);
+            // Draw nodes recursively
+            self.draw_node(cx, live_id!(root));
+        }
+        DrawStep::done()
+    }
+}
+```
+
+### Registering Custom Draw Shaders
+
+For custom draw types with shader fields, use `script_shader`:
+
+```rust
+script_mod!{
+    use mod.prelude.widgets_internal.*
+    
+    // Register custom draw shader
+    set_type_default() do #(DrawMyShader::script_shader(vm)){
+        ..mod.draw.DrawQuad  // Inherit from DrawQuad
+    }
+    
+    // Register widget that uses it
+    mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))
+}
+
+#[derive(Script, ScriptHook)]
+#[repr(C)]
+struct DrawMyShader {
+    #[deref] draw_super: DrawQuad,
+    #[live] my_param: f32,
+}
+```
+
+### Registering Components (non-Widget)
+
+For structs that aren't full widgets but need script registration:
+
+```rust
+script_mod!{
+    // For components (not widgets)
+    mod.widgets.MyComponentBase = #(MyComponent::script_component(vm))
+    
+    // For widgets (implements Widget trait)
+    mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))
+}
+```
+
+### Script Prelude Modules
+
+Two prelude modules available:
+- `mod.prelude.widgets_internal.*` - For internal widget library development
+- `mod.prelude.widgets.*` - For app development (includes all widgets)
+
+```rust
+script_mod!{
+    // App development - use widgets prelude
+    use mod.prelude.widgets.*
+    
+    // Or for widget library internals
+    use mod.prelude.widgets_internal.*
+    use mod.widgets.*
+}
+```
+
+### Default Enum Values
+
+For enums with a `None` variant that need `Default`, use standard Rust `#[default]` attribute instead of `DefaultNone` derive:
+
+```rust
+// Correct - use #[default] attribute on the None variant
+#[derive(Clone, Copy, Debug, PartialEq, Default)]
+pub enum MyAction {
+    SomeAction,
+    AnotherAction,
+    #[default]
+    None,
+}
+
+// Wrong - don't use DefaultNone derive
+#[derive(Clone, Copy, Debug, PartialEq, DefaultNone)]  // Don't do this
+pub enum MyAction {
+    SomeAction,
+    None,
+}
+```
+
+### Multi-Module Script Registration Pattern
+
+When refactoring a multi-file project (like studio) from `live_design!` to `script_mod!`:
+
+1. **Each widget module** defines its own `script_mod!` that registers to `mod.widgets.*`:
+```rust
+// In studio_editor.rs
+script_mod! {
+    use mod.prelude.widgets_internal.*
+    use mod.widgets.*
+    
+    mod.widgets.StudioCodeEditorBase = #(StudioCodeEditor::register_widget(vm))
+    mod.widgets.StudioCodeEditor = set_type_default() do mod.widgets.StudioCodeEditorBase {
+        editor := CodeEditor {}
+    }
+}
+```
+
+2. **The lib.rs** aggregates all widget script_mods:
+```rust
+pub fn script_mod(vm: &mut ScriptVm) {
+    crate::module1::script_mod(vm);
+    crate::module2::script_mod(vm);
+    // ... all widget modules
+}
+```
+
+3. **The app.rs** calls them in correct order:
+```rust
+impl App {
+    fn run(vm: &mut ScriptVm) -> Self {
+        crate::makepad_widgets::script_mod(vm);  // Base widgets first
+        crate::script_mod(vm);                    // Your widget modules
+        crate::app_ui::script_mod(vm);            // UI that uses the widgets
+        App::from_script_mod(vm, self::script_mod)
+    }
+}
+```
+
+4. **The app_ui.rs** can then use registered widgets:
+```rust
+script_mod! {
+    use mod.prelude.widgets.*
+    // Now StudioCodeEditor is available from mod.widgets
+    
+    let EditorContent = View {
+        editor := StudioCodeEditor {}
+    }
+}
+```
+
+### Cross-Module Sharing via `mod` Object
+
+**IMPORTANT**: `use crate.module.*` does NOT work in script_mod. The `crate.` prefix is not available.
+
+To share definitions between script_mod blocks in different files, store them in the `mod` object:
+
+```rust
+// In app_ui.rs - export to mod.widgets namespace
+script_mod! {
+    use mod.prelude.widgets.*
+    
+    // This makes AppUI available as mod.widgets.AppUI
+    mod.widgets.AppUI = Window{
+        // ...
+    }
+}
+
+// In app.rs - import via mod.widgets
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*  // Now AppUI is in scope
+    
+    load_all_resources() do #(App::script_component(vm)){
+        ui: Root{ AppUI{} }
+    }
+}
+```
+
+The `mod` object is the only way to share data between script_mod blocks.
+
+### Prelude Alias Syntax
+
+When defining a prelude, use `name:mod.path` to create an alias:
+```rust
+mod.prelude.widgets = {
+    ..mod.std,           // Spread all of mod.std into scope
+    theme:mod.theme,     // Create 'theme' as alias for mod.theme
+    draw:mod.draw,       // Create 'draw' as alias for mod.draw
+}
+```
+
+Without the alias (just `mod.theme,`), the module is included but has no name - you can't access it!
+
+### Let Bindings are Local
+
+`let` bindings in script_mod are LOCAL to that script_mod block. They cannot be:
+- Accessed from other script_mod blocks
+- Used as property values directly (e.g., `content +: MyLetBinding` won't work)
+
+To use a `let` binding, instantiate it: `MyLetBinding{}` or store it in `mod.*` for cross-module access.
+
+### Debug Logging with `~`
+
+Use `~expression` to log the value of an expression during script evaluation:
+```rust
+script_mod! {
+    ~mod.theme           // Logs the theme object
+    ~mod.prelude.widgets // Logs what's in the prelude
+    ~some_variable       // Logs a variable's value (or "not found" error)
+}
+```
+
+### Common Pitfalls
+
+**Widget ID references**: Named widget instances use `:=` in the DSL and plain names in Rust id macros:
+- DSL defines `code_block := View { ... }` → Rust uses `id!(code_block)`
+- DSL defines `my_button := Button { ... }` → Rust uses `ids!(my_button)`
+
+1. **Missing `#[source]`**: All Script-derived structs need `#[source] source: ScriptObjectRef`
+
+2. **Template scope**: Templates defined inside Dock aren't available outside; use `let` at script level
+
+3. **Uniform vs Instance**: Use `instance()` for per-widget varying colors (like hover states on backgrounds)
+
+4. **Forgot `+:`**: Without `+:`, you replace the entire property instead of merging
+
+5. **Theme access**: Always `theme.color_x`, never `THEME_COLOR_X` or `(theme.color_x)`
+
+6. **Missing widget registration**: Call `crate::makepad_widgets::script_mod(vm)` in `App::run()` before your own `script_mod`. Note: the old `live_design!` system and its crates are archived under `old/`
+
+7. **Draw shader repr**: Custom draw shaders need `#[repr(C)]` for correct memory layout
+
+8. **DefaultNone derive**: Don't use `DefaultNone` derive - use standard `#[derive(Default)]` with `#[default]` attribute on the `None` variant
+
+9. **Script_mod call order**: Widget modules must be registered BEFORE UI modules that use them. Always call `lib.rs::script_mod` before `app_ui::script_mod`
+
+10. **`pub` keyword invalid in script_mod**: Don't use `pub mod.widgets.X = ...`, just use `mod.widgets.X = ...`. Visibility is controlled by the Rust module system, not script_mod.
+
+11. **Syntax for Inset/Align/Walk**: Use constructor syntax - `margin: Inset{left: 10}` not `margin: {left: 10}`, `align: Align{x: 0.5 y: 0.5}` not `align: {x: 0.5, y: 0.5}`
+
+12. **Cursor values**: Use `cursor: MouseCursor.Hand` not `cursor: Hand` or `cursor: @Hand`
+
+13. **Resource paths**: Use `crate_resource("self://path")` not `dep("crate://self/path")`
+
+14. **Texture declarations in shaders**: Use `tex: texture_2d(float)` not `tex: texture2d`
+
+15. **Enums not exposed to script**: Some Rust enums like `PopupMenuPosition::BelowInput` may not be exposed to script. If you get "not found" errors on enum variants, just remove the property and use the default
+
+17. **Shader `mod` vs `modf`**: The Makepad shader language uses `modf(a, b)` for float modulo, NOT `mod(a, b)`. Similarly, use `atan2(y, x)` not `atan(y, x)` for two-argument arctangent. `atan(x)` (single arg) is also available. `fract(x)` works as expected.
+
+16. **Draw shader struct field ordering**: In `#[repr(C)]` draw shader structs that extend another draw shader via `#[deref]`, NEVER place `#[rust]` or other non-instance data AFTER `DrawVars` and the instance fields. The system uses an unsafe pointer trick in `DrawVars::as_slice()` that reads contiguously past the end of `dyn_instances` into the subsequent `#[live]` fields. Any non-instance data between `DrawVars` and the instance fields will corrupt the GPU instance buffer. Put all extra data (like `#[rust]`, `#[live]` non-instance fields such as resource handles, booleans, etc.) BEFORE the `#[deref]` field, and only `#[live]` instance fields (the ones that map to shader inputs) AFTER.
+    ```rust
+    // CORRECT - non-instance data before deref, instance fields after
+    #[derive(Script, ScriptHook)]
+    #[repr(C)]
+    pub struct MyDrawShader {
+        #[live] pub svg: Option<ScriptHandleRef>,  // non-instance, BEFORE deref
+        #[rust] my_state: bool,                     // non-instance, BEFORE deref
+        #[deref] pub draw_super: DrawVector,        // contains DrawVars + base instance fields
+        #[live] pub tint: Vec4f,                    // instance field, AFTER deref - OK
+    }
+
+    // WRONG - rust data after instance fields breaks the memory layout
+    #[derive(Script, ScriptHook)]
+    #[repr(C)]
+    pub struct MyDrawShader {
+        #[deref] pub draw_super: DrawVector,
+        #[live] pub tint: Vec4f,      // instance field
+        #[rust] my_state: bool,       // BAD: sits between tint and the next shader's fields
+    }
+    ```
+
+18. **Don't put comments or blank lines before the first real code in `script!`/`script_mod!`**: Rust's proc macro token stream strips comments entirely — they produce no tokens. This shifts error column/line info because the span tracking starts from the first actual token. Always start with real code (e.g., `use mod.std.assert`) immediately after the opening brace.
+
+19. **WARNING: Hex colors containing the letter `e` in `script_mod!`**: The Rust tokenizer interprets `e` or `E` in hex color literals as a scientific notation exponent, causing parse errors like `expected at least one digit in exponent`. For example, `#2ecc71` fails because `2e` looks like the start of `2e<exponent>`. **Use the `#x` prefix** to escape this: write `#x2ecc71` instead of `#x2ecc71`. This applies to any hex color where a digit is immediately followed by `e`/`E` (e.g., `#1e1e2e`, `#4466ee`, `#7799ee`, `#bb99ee`). Colors without `e` (like `#ff4444`, `#44cc44`) work fine with plain `#`.
+
+20. **Shader enums**: Prefer `match` on enum values with `_ =>` as the catch-all arm, not `if/else` chains over integer-like values. If enum `match` fails in shader compilation, treat it as a compiler bug: add or extend a `platform/script/test` case and fix the shader compiler path instead of rewriting shader logic to `if/else`.
\ No newline at end of file
diff --git a/Cargo.lock b/Cargo.lock
index c615b8cb7..518329b0a 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -5,7 +5,7 @@ version = 4
 [[package]]
 name = "ab_glyph_rasterizer"
 version = "0.1.8"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "accessory"
@@ -66,7 +66,7 @@ version = "1.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8e60d3430d3a69478ad0993f19238d2df97c507009a52b3c10addcd7f6bcb916"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -230,6 +230,15 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9dbc3a507a82b17ba0d98f6ce8fd6954ea0c8152e98009d36a40d8dcc8ce078a"
 
+[[package]]
+name = "ash"
+version = "0.38.0+1.3.281"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bb44936d800fea8f016d7f2311c6a4f97aebd5dc86f09906139ec848cf3a46f"
+dependencies = [
+ "libloading",
+]
+
 [[package]]
 name = "askar-crypto"
 version = "0.3.7"
@@ -482,7 +491,7 @@ dependencies = [
  "hyper-util",
  "itoa",
  "matchit",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "mime",
  "percent-encoding",
  "pin-project-lite",
@@ -560,7 +569,7 @@ version = "0.72.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "993776b509cfb49c750f11b8f07a46fa23e0a1386ffc01fb1e7d343efc387895"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "cexpr",
  "clang-sys",
  "itertools 0.13.0",
@@ -569,16 +578,25 @@ dependencies = [
  "proc-macro2",
  "quote",
  "regex",
- "rustc-hash",
+ "rustc-hash 2.1.1",
  "shlex",
  "syn 2.0.106",
 ]
 
 [[package]]
-name = "bitflags"
-version = "1.3.2"
+name = "bit-set"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08807e080ed7f9d5433fa9b275196cfc35414f66a0c79d864dc51a0d825231a3"
+dependencies = [
+ "bit-vec",
+]
+
+[[package]]
+name = "bit-vec"
+version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
+checksum = "5e764a1d40d510daf35e07be9eb06e75770908c27d411ee6c92109c9840eaaf7"
 
 [[package]]
 name = "bitflags"
@@ -589,6 +607,11 @@ dependencies = [
  "serde_core",
 ]
 
+[[package]]
+name = "bitflags"
+version = "2.10.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "bitmaps"
 version = "3.2.1"
@@ -704,9 +727,8 @@ checksum = "46c5e41b57b8bba42a04676d81cb89e9ee8e859a1a66f80a5a72e1cb76b34d43"
 
 [[package]]
 name = "bytemuck"
-version = "1.24.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fbdf580320f38b612e485521afda1ee26d10cc9884efaaa750d383e13e3c5f4"
+version = "1.25.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "byteorder"
@@ -714,6 +736,11 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
 
+[[package]]
+name = "byteorder"
+version = "1.5.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "bytes"
 version = "1.11.1"
@@ -910,6 +937,15 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "codespan-reporting"
+version = "0.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fe6d2e5af09e8c8ad56c969f2157a3d4238cebc7c55f0a517728c38f7b200f81"
+dependencies = [
+ "unicode-width",
+]
+
 [[package]]
 name = "colorchoice"
 version = "1.0.4"
@@ -923,7 +959,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ba5a308b75df32fe02788e748662718f03fde005016435c444eea572398219fd"
 dependencies = [
  "bytes",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -934,7 +970,7 @@ checksum = "485abf41ac0c8047c07c87c72c8fb3eb5197f6e9d7ded615dfd1a00ae00a0f64"
 dependencies = [
  "compression-core",
  "flate2",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -985,7 +1021,7 @@ version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec182b0ca2f35d8fc196cf3404988fd8b8c739a4d270ff118a398feb0cbec1ca"
 dependencies = [
- "unicode-segmentation",
+ "unicode-segmentation 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -1020,7 +1056,7 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b49ba7ef1ad6107f8824dbe97de947cbaac53c44e7f9756a1fba0d37c1eec505"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -1237,12 +1273,6 @@ version = "2.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2a2330da5de22e8a3cb63252ce2abb30116bf5265e89c0e01bc17015ce30a476"
 
-[[package]]
-name = "data-url"
-version = "0.3.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "be1e0bca6c3637f992fc1cc7cbc52a78c1ef6db076dbf1059c4323d6a2048376"
-
 [[package]]
 name = "date_header"
 version = "1.0.5"
@@ -1438,7 +1468,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "objc2",
 ]
 
@@ -1453,15 +1483,6 @@ dependencies = [
  "syn 2.0.106",
 ]
 
-[[package]]
-name = "dlib"
-version = "0.5.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "330c60081dcc4c72131f8eb70510f1ac07223e5d4163db481a04a0befcffa412"
-dependencies = [
- "libloading",
-]
-
 [[package]]
 name = "dotenvy"
 version = "0.15.7"
@@ -1584,7 +1605,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -1598,15 +1619,6 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
-[[package]]
-name = "euclid"
-version = "0.22.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad9cdb4b747e485a12abb0e6566612956c7a1bafa3bdb8d682c5b6d403589e48"
-dependencies = [
- "num-traits",
-]
-
 [[package]]
 name = "event-listener"
 version = "5.4.1"
@@ -1665,7 +1677,7 @@ dependencies = [
  "futures-core",
  "imbl",
  "pin-project-lite",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -1698,15 +1710,6 @@ version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
 
-[[package]]
-name = "fdeflate"
-version = "0.3.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e6853b52649d4ac5c0bd02320cddc5ba956bdb407c4b75a2c6b75bf51500f8c"
-dependencies = [
- "simd-adler32",
-]
-
 [[package]]
 name = "ff"
 version = "0.13.1"
@@ -1739,12 +1742,6 @@ dependencies = [
  "miniz_oxide",
 ]
 
-[[package]]
-name = "float-cmp"
-version = "0.9.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "98de4bbd547a563b716d8dfa9aad1cb19bfab00f4fa09a6a4ed21dbcf44ce9c4"
-
 [[package]]
 name = "flume"
 version = "0.11.1"
@@ -1921,7 +1918,7 @@ dependencies = [
  "futures-macro",
  "futures-sink",
  "futures-task",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "pin-project-lite",
  "pin-utils",
  "slab",
@@ -1939,10 +1936,9 @@ dependencies = [
 [[package]]
 name = "fxhash"
 version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c31b6d751ae2c7f11320402d34e41349dd1016f8d5d45e48c4312bc8625af50c"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "byteorder",
+ "byteorder 1.5.0 (git+https://github.com/makepad/makepad?branch=dev)",
 ]
 
 [[package]]
@@ -2088,6 +2084,7 @@ checksum = "6ea2d84b969582b4b1864a92dc5d27cd2b77b622a8d79306834f1be5ba20d84b"
 dependencies = [
  "cfg-if",
  "crunchy",
+ "num-traits",
  "zerocopy",
 ]
 
@@ -2170,6 +2167,12 @@ version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
+[[package]]
+name = "hexf-parse"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dfa686283ad6dd069f105e5ab091b04c62850d3e4cf5d67debad1933f55023df"
+
 [[package]]
 name = "hilog-sys"
 version = "0.1.6"
@@ -2241,7 +2244,7 @@ version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d347c0de239be20ba0982e4822de3124404281e119ae3e11f5d7425a414e1935"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "pastey",
 ]
 
@@ -2262,7 +2265,7 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "150fa4a9462ef926824cf4519c84ed652ca8f4fbae34cb8af045b5cbcaf98822"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -2327,7 +2330,7 @@ dependencies = [
  "itoa",
  "pin-project-lite",
  "pin-utils",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "tokio",
  "want",
 ]
@@ -2453,7 +2456,7 @@ dependencies = [
  "icu_normalizer_data",
  "icu_properties",
  "icu_provider",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "zerovec",
 ]
 
@@ -2515,7 +2518,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3b0875f23caa03898994f6ddc501886a45c7d3d62d04d2d90788d47be1b1e4de"
 dependencies = [
  "idna_adapter",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "utf8_iter",
 ]
 
@@ -2529,12 +2532,6 @@ dependencies = [
  "icu_properties",
 ]
 
-[[package]]
-name = "imagesize"
-version = "0.12.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "029d73f573d8e8d63e6d5020011d3255b28c3ba85d6cf870a07184ed23de9284"
-
 [[package]]
 name = "imbl"
 version = "6.1.0"
@@ -2640,7 +2637,7 @@ version = "0.7.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dbc5ebe9c3a1a7a5127f920a418f7585e9e758e911d0466ed004f393b0e380b2"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde",
 ]
 
@@ -2775,17 +2772,6 @@ dependencies = [
  "typewit",
 ]
 
-[[package]]
-name = "kurbo"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c62026ae44756f8a599ba21140f350303d4f08dcdcc71b5ad9c9bb8128c13c62"
-dependencies = [
- "arrayvec",
- "euclid",
- "smallvec",
-]
-
 [[package]]
 name = "language-tags"
 version = "0.3.2"
@@ -2814,7 +2800,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
  "cfg-if",
- "windows-targets 0.48.5",
+ "windows-targets 0.53.4",
 ]
 
 [[package]]
@@ -2829,7 +2815,7 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "416f7e718bdb06000964960ffa43b4335ad4012ae8b99060261aa4a8088d5ccb"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "libc",
  "redox_syscall",
 ]
@@ -2851,7 +2837,7 @@ version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f1dfa36d52c581e9ec783a7ce2a5e0143da6237be5811a0b3153fedfdbe9f780"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -2965,34 +2951,43 @@ dependencies = [
 ]
 
 [[package]]
-name = "makepad-code-editor"
+name = "makepad-apple-sys"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-widgets",
+ "makepad-objc-sys",
 ]
 
 [[package]]
-name = "makepad-derive-live"
+name = "makepad-base64"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
+[[package]]
+name = "makepad-byteorder-lite"
+version = "0.1.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
+[[package]]
+name = "makepad-code-editor"
+version = "2.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-live-id",
- "makepad-micro-proc-macro",
+ "makepad-widgets",
 ]
 
 [[package]]
 name = "makepad-derive-wasm-bridge"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
 [[package]]
 name = "makepad-derive-widget"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "2.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -3000,97 +2995,63 @@ dependencies = [
 
 [[package]]
 name = "makepad-draw"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "2.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "ab_glyph_rasterizer",
  "fxhash",
- "makepad-html",
+ "makepad-gltf",
  "makepad-live-id",
  "makepad-platform",
- "makepad-rustybuzz",
- "makepad-vector",
- "png",
+ "makepad-svg",
+ "makepad-webp",
+ "makepad-zune-jpeg",
+ "makepad-zune-png",
+ "rustybuzz",
  "sdfer",
- "serde",
- "ttf-parser",
- "unicode-bidi",
+ "unicode-bidi 0.3.18 (git+https://github.com/makepad/makepad?branch=dev)",
  "unicode-linebreak",
- "unicode-segmentation",
+ "unicode-segmentation 1.12.0 (git+https://github.com/makepad/makepad?branch=dev)",
 ]
 
 [[package]]
 name = "makepad-error-log"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-micro-serde",
 ]
 
 [[package]]
-name = "makepad-fonts-chinese-bold"
-version = "1.0.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "makepad-platform",
-]
-
-[[package]]
-name = "makepad-fonts-chinese-bold-2"
-version = "1.0.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "makepad-platform",
-]
-
-[[package]]
-name = "makepad-fonts-chinese-regular"
-version = "1.0.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "makepad-platform",
-]
-
-[[package]]
-name = "makepad-fonts-chinese-regular-2"
-version = "1.0.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "makepad-platform",
-]
-
-[[package]]
-name = "makepad-fonts-emoji"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "makepad-platform",
-]
+name = "makepad-fast-inflate"
+version = "0.1.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "makepad-futures"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "makepad-futures-legacy"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
-name = "makepad-html"
+name = "makepad-gltf"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-live-id",
+ "makepad-base64",
+ "makepad-micro-serde",
 ]
 
 [[package]]
-name = "makepad-http"
+name = "makepad-html"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-script",
+ "makepad-live-id",
 ]
 
 [[package]]
@@ -3100,46 +3061,33 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9775cbec5fa0647500c3e5de7c850280a88335d1d2d770e5aa2332b801ba7064"
 
 [[package]]
-name = "makepad-live-compiler"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+name = "makepad-latex-math"
+version = "0.1.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-derive-live",
- "makepad-live-tokenizer",
- "makepad-math",
+ "ttf-parser",
 ]
 
 [[package]]
 name = "makepad-live-id"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-live-id-macros",
- "serde",
 ]
 
 [[package]]
 name = "makepad-live-id-macros"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
-[[package]]
-name = "makepad-live-tokenizer"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "makepad-live-id",
- "makepad-math",
- "makepad-micro-serde",
-]
-
 [[package]]
 name = "makepad-math"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-micro-serde",
 ]
@@ -3147,12 +3095,12 @@ dependencies = [
 [[package]]
 name = "makepad-micro-proc-macro"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "makepad-micro-serde"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-serde-derive",
@@ -3161,153 +3109,174 @@ dependencies = [
 [[package]]
 name = "makepad-micro-serde-derive"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
+[[package]]
+name = "makepad-network"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "makepad-apple-sys",
+ "makepad-futures-legacy",
+ "makepad-live-id",
+ "makepad-micro-serde",
+ "makepad-script",
+ "windows 0.62.2",
+]
+
 [[package]]
 name = "makepad-objc-sys"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "makepad-platform"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "2.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "bitflags 2.10.0",
+ "ash",
+ "bitflags 2.10.0 (git+https://github.com/makepad/makepad?branch=dev)",
  "hilog-sys",
  "makepad-android-state",
- "makepad-error-log",
+ "makepad-apple-sys",
  "makepad-futures",
  "makepad-futures-legacy",
- "makepad-http",
  "makepad-jni-sys",
+ "makepad-network",
  "makepad-objc-sys",
- "makepad-shader-compiler",
+ "makepad-script",
  "makepad-wasm-bridge",
+ "makepad-zune-png",
+ "naga",
  "napi-derive-ohos",
  "napi-ohos",
  "ohos-sys",
- "smallvec",
+ "smallvec 1.15.1 (git+https://github.com/makepad/makepad?branch=dev)",
  "wayland-client",
  "wayland-egl",
  "wayland-protocols",
- "windows 0.56.0",
- "windows-core 0.56.0",
+ "windows 0.62.2",
+ "windows-core 0.62.2",
  "windows-targets 0.52.6",
 ]
 
 [[package]]
-name = "makepad-rustybuzz"
-version = "0.8.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-dependencies = [
- "bitflags 1.3.2",
- "bytemuck",
- "makepad-ttf-parser",
- "smallvec",
- "unicode-bidi-mirroring",
- "unicode-ccc",
- "unicode-properties",
- "unicode-script",
-]
+name = "makepad-regex"
+version = "0.1.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "makepad-script"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-error-log",
+ "makepad-html",
  "makepad-live-id",
  "makepad-math",
+ "makepad-regex",
  "makepad-script-derive",
- "smallvec",
+ "smallvec 1.15.1 (git+https://github.com/makepad/makepad?branch=dev)",
 ]
 
 [[package]]
 name = "makepad-script-derive"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
 [[package]]
-name = "makepad-shader-compiler"
+name = "makepad-splat"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-live-compiler",
+ "makepad-micro-serde",
+ "makepad-webp",
+ "makepad-zip-file",
 ]
 
 [[package]]
-name = "makepad-ttf-parser"
-version = "0.21.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
-
-[[package]]
-name = "makepad-vector"
+name = "makepad-svg"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "makepad-ttf-parser",
- "resvg",
+ "makepad-html",
+ "makepad-live-id",
 ]
 
 [[package]]
 name = "makepad-wasm-bridge"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-derive-wasm-bridge",
  "makepad-live-id",
 ]
 
+[[package]]
+name = "makepad-webp"
+version = "0.2.4"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "makepad-byteorder-lite",
+]
+
 [[package]]
 name = "makepad-widgets"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "2.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-derive-widget",
  "makepad-draw",
- "makepad-fonts-chinese-bold",
- "makepad-fonts-chinese-bold-2",
- "makepad-fonts-chinese-regular",
- "makepad-fonts-chinese-regular-2",
- "makepad-fonts-emoji",
  "makepad-html",
- "makepad-zune-jpeg",
- "makepad-zune-png",
+ "makepad-latex-math",
+ "makepad-splat",
  "pulldown-cmark 0.12.2",
- "serde",
- "unicode-segmentation",
+ "ttf-parser",
+ "unicode-segmentation 1.12.0 (git+https://github.com/makepad/makepad?branch=dev)",
+]
+
+[[package]]
+name = "makepad-zip-file"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "makepad-fast-inflate",
 ]
 
 [[package]]
 name = "makepad-zune-core"
-version = "0.2.14"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "0.5.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
+[[package]]
+name = "makepad-zune-inflate"
+version = "0.2.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "bitflags 2.10.0",
+ "simd-adler32",
 ]
 
 [[package]]
 name = "makepad-zune-jpeg"
-version = "0.3.17"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "0.5.12"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "makepad-zune-core",
 ]
 
 [[package]]
 name = "makepad-zune-png"
-version = "0.4.10"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+version = "0.5.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "zune-core",
- "zune-inflate",
+ "makepad-zune-core",
+ "makepad-zune-inflate",
 ]
 
 [[package]]
@@ -3442,7 +3411,7 @@ source = "git+https://github.com/matrix-org/matrix-rust-sdk?branch=main#d64c9906
 dependencies = [
  "as_variant",
  "async-trait",
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "decancer",
  "eyeball",
  "eyeball-im",
@@ -3495,7 +3464,7 @@ dependencies = [
  "as_variant",
  "async-trait",
  "bs58",
- "byteorder",
+ "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "cfg-if",
  "ctr",
  "eyeball",
@@ -3612,7 +3581,7 @@ dependencies = [
  "async-rx",
  "async-stream",
  "async_cell",
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "chrono",
  "emojis",
  "eyeball",
@@ -3639,7 +3608,7 @@ dependencies = [
  "tokio-stream",
  "tracing",
  "unicode-normalization",
- "unicode-segmentation",
+ "unicode-segmentation 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -3659,7 +3628,7 @@ dependencies = [
  "sealed",
  "serde",
  "serde-wasm-bindgen",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "thiserror 2.0.17",
  "tokio",
  "wasm-bindgen",
@@ -3697,6 +3666,11 @@ version = "2.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
 
+[[package]]
+name = "memchr"
+version = "2.7.6"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "mime"
 version = "0.3.17"
@@ -3722,7 +3696,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
 dependencies = [
  "adler2",
- "simd-adler32",
 ]
 
 [[package]]
@@ -3746,6 +3719,32 @@ dependencies = [
  "unsigned-varint",
 ]
 
+[[package]]
+name = "naga"
+version = "27.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "066cf25f0e8b11ee0df221219010f213ad429855f57c494f995590c861a9a7d8"
+dependencies = [
+ "arrayvec",
+ "bit-set",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "cfg-if",
+ "cfg_aliases",
+ "codespan-reporting",
+ "half",
+ "hashbrown 0.16.1",
+ "hexf-parse",
+ "indexmap 2.13.0",
+ "libm",
+ "log",
+ "num-traits",
+ "once_cell",
+ "rustc-hash 1.1.0",
+ "spirv",
+ "thiserror 2.0.17",
+ "unicode-ident",
+]
+
 [[package]]
 name = "napi-derive-backend-ohos"
 version = "0.0.7"
@@ -3780,7 +3779,7 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad5a3bbb2ae61f345b8c11776f2e79fc2bb71d1901af9a5f81f03c9238a05d86"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "ctor",
  "napi-sys-ohos",
  "once_cell",
@@ -3830,7 +3829,7 @@ version = "7.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d273983c5a657a70a3e8f2a01329822f3b8c8172b73826411a55751e404a0a4a"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "minimal-lexical",
 ]
 
@@ -3855,7 +3854,7 @@ dependencies = [
  "num-iter",
  "num-traits",
  "rand 0.8.5",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "zeroize",
 ]
 
@@ -3940,7 +3939,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e6f29f568bec459b0ddff777cec4fe3fd8666d82d5a40ebd0ff7e66134f89bcc"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "objc2",
  "objc2-foundation",
 ]
@@ -3951,7 +3950,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1c10c2894a6fed806ade6027bcd50662746363a9589d3ec9d9bef30a4e4bc166"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "dispatch2",
  "objc2",
 ]
@@ -3978,7 +3977,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "900831247d2fe1a09a683278e5384cfb8c80c79fe6b166f9d14bfdde0ea1b03c"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "objc2",
  "objc2-core-foundation",
 ]
@@ -3989,7 +3988,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "25b1312ad7bc8a0e92adae17aa10f90aae1fb618832f9b993b022b591027daed"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "block2",
  "objc2",
  "objc2-foundation",
@@ -4025,7 +4024,7 @@ version = "0.10.75"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "08838db121398ad17ab8531ce9de97b244589089e290a384c900cb9ff7434328"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "cfg-if",
  "foreign-types",
  "libc",
@@ -4118,7 +4117,7 @@ dependencies = [
  "cfg-if",
  "libc",
  "redox_syscall",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "windows-targets 0.52.6",
 ]
 
@@ -4226,12 +4225,6 @@ dependencies = [
  "siphasher",
 ]
 
-[[package]]
-name = "pico-args"
-version = "0.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5be167a7af36ee22fe3115051bc51f6e6c7054c9348e28deb4f49bd6f705a315"
-
 [[package]]
 name = "pin-project-lite"
 version = "0.2.16"
@@ -4271,19 +4264,6 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"
 
-[[package]]
-name = "png"
-version = "0.17.16"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "82151a2fc869e011c153adc57cf2789ccb8d9906ce52c0b39a6b5697749d7526"
-dependencies = [
- "bitflags 1.3.2",
- "crc32fast",
- "fdeflate",
- "flate2",
- "miniz_oxide",
-]
-
 [[package]]
 name = "poly1305"
 version = "0.8.0"
@@ -4421,13 +4401,11 @@ dependencies = [
 [[package]]
 name = "pulldown-cmark"
 version = "0.12.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f86ba2052aebccc42cbbb3ed234b8b13ce76f75c3551a303cb2bcffcff12bb14"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "bitflags 2.10.0",
- "memchr",
- "pulldown-cmark-escape",
- "unicase",
+ "bitflags 2.10.0 (git+https://github.com/makepad/makepad?branch=dev)",
+ "memchr 2.7.6 (git+https://github.com/makepad/makepad?branch=dev)",
+ "unicase 2.9.0",
 ]
 
 [[package]]
@@ -4436,10 +4414,10 @@ version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e8bbe1a966bd2f362681a44f6edce3c2310ac21e4d5067a6e7ec396297a6ea0"
 dependencies = [
- "bitflags 2.10.0",
- "memchr",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "pulldown-cmark-escape",
- "unicase",
+ "unicase 2.8.1",
 ]
 
 [[package]]
@@ -4448,15 +4426,6 @@ version = "0.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "007d8adb5ddab6f8e3f491ac63566a7d5002cc7ed73901f72057943fa71ae1ae"
 
-[[package]]
-name = "quick-xml"
-version = "0.37.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "331e97a1af0bf59823e6eadffe373d7b27f485be8748f71471c662c1f269b7fb"
-dependencies = [
- "memchr",
-]
-
 [[package]]
 name = "quinn"
 version = "0.11.9"
@@ -4468,7 +4437,7 @@ dependencies = [
  "pin-project-lite",
  "quinn-proto",
  "quinn-udp",
- "rustc-hash",
+ "rustc-hash 2.1.1",
  "rustls",
  "socket2",
  "thiserror 2.0.17",
@@ -4489,7 +4458,7 @@ dependencies = [
  "lru-slab",
  "rand 0.9.2",
  "ring",
- "rustc-hash",
+ "rustc-hash 2.1.1",
  "rustls",
  "rustls-pki-types",
  "slab",
@@ -4623,7 +4592,7 @@ version = "0.5.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5407465600fb0548f1442edf71dd20683c6ed326200ace4b1ef0763521bb3b77"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -4664,7 +4633,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "843bc0191f75f3e22651ae5f1e72939ab2f72a4bc30fa80a066bd66edefc24d4"
 dependencies = [
  "aho-corasick",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "regex-automata",
  "regex-syntax",
 ]
@@ -4676,7 +4645,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5276caf25ac86c8d810222b3dbb938e512c55c6831a10f3e6ed1c93b84041f1c"
 dependencies = [
  "aho-corasick",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "regex-syntax",
 ]
 
@@ -4734,20 +4703,6 @@ dependencies = [
  "webpki-roots",
 ]
 
-[[package]]
-name = "resvg"
-version = "0.42.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "944d052815156ac8fa77eaac055220e95ba0b01fa8887108ca710c03805d9051"
-dependencies = [
- "log",
- "pico-args",
- "rgb",
- "svgtypes",
- "tiny-skia",
- "usvg",
-]
-
 [[package]]
 name = "rfc6979"
 version = "0.4.0"
@@ -4758,15 +4713,6 @@ dependencies = [
  "subtle",
 ]
 
-[[package]]
-name = "rgb"
-version = "0.8.52"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0c6a884d2998352bb4daf0183589aec883f16a6da1f4dde84d8e2e9a5409a1ce"
-dependencies = [
- "bytemuck",
-]
-
 [[package]]
 name = "ring"
 version = "0.17.14"
@@ -4787,7 +4733,7 @@ version = "0.8.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "228ed7c16fa39782c3b3468e974aec2795e9089153cd08ee2e9aefb3613334c4"
 dependencies = [
- "byteorder",
+ "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "num-traits",
  "paste",
 ]
@@ -4798,7 +4744,7 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "52e599a477cf9840e92f2cde9a7189e67b42c57532749bf90aea6ec10facd4db"
 dependencies = [
- "byteorder",
+ "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "rmp",
  "serde",
 ]
@@ -4871,7 +4817,7 @@ version = "0.0.1-pre-alpha-4"
 dependencies = [
  "anyhow",
  "aws-lc-rs",
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "blurhash",
  "bytesize",
  "chrono",
@@ -4909,16 +4855,10 @@ dependencies = [
  "tokio",
  "tracing-subscriber",
  "tsp_sdk",
- "unicode-segmentation",
+ "unicode-segmentation 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "url",
 ]
 
-[[package]]
-name = "roxmltree"
-version = "0.20.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c20b6793b5c2fa6553b250154b78d6d0db37e72700ae35fad9387a46f487c97"
-
 [[package]]
 name = "rsa"
 version = "0.9.10"
@@ -5113,14 +5053,20 @@ version = "0.37.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "165ca6e57b20e1351573e3729b958bc62f0e48025386970b6e4d29e7a7e71f3f"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "fallible-iterator",
  "fallible-streaming-iterator",
  "hashlink",
  "libsqlite3-sys",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
+[[package]]
+name = "rustc-hash"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08d43f7aa6b08d49f382cde6a7982047c3426db949b1424bc4b7ec9ae12c6ce2"
+
 [[package]]
 name = "rustc-hash"
 version = "2.1.1"
@@ -5142,11 +5088,11 @@ version = "1.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cd15f8a2c5551a84d56efdc1cd049089e409ac19a3072d5037a17fd70719ff3e"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "errno",
  "libc",
  "linux-raw-sys",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -5214,6 +5160,22 @@ version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"
 
+[[package]]
+name = "rustybuzz"
+version = "0.18.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "bitflags 2.10.0 (git+https://github.com/makepad/makepad?branch=dev)",
+ "bytemuck",
+ "makepad-error-log",
+ "smallvec 1.15.1 (git+https://github.com/makepad/makepad?branch=dev)",
+ "ttf-parser",
+ "unicode-bidi-mirroring",
+ "unicode-ccc",
+ "unicode-properties 0.1.4",
+ "unicode-script",
+]
+
 [[package]]
 name = "ryu"
 version = "1.0.20"
@@ -5301,7 +5263,7 @@ checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 [[package]]
 name = "sdfer"
 version = "0.2.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "sealed"
@@ -5333,7 +5295,7 @@ version = "2.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "core-foundation 0.9.4",
  "core-foundation-sys",
  "libc",
@@ -5346,7 +5308,7 @@ version = "3.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cc198e42d9b7510827939c9a15f5062a0c913f3371d765977e586d2fe6c16f4a"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "core-foundation 0.10.1",
  "core-foundation-sys",
  "libc",
@@ -5449,7 +5411,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
 dependencies = [
  "itoa",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde",
  "serde_core",
  "zmij",
@@ -5599,18 +5561,8 @@ dependencies = [
 
 [[package]]
 name = "simd-adler32"
-version = "0.3.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d66dc143e6b11c1eddc06d5c423cfc97062865baf299914ab64caa38182078fe"
-
-[[package]]
-name = "simplecss"
-version = "0.2.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a9c6883ca9c3c7c90e888de77b7a5c849c779d25d74a1269b0218b14e8b136c"
-dependencies = [
- "log",
-]
+version = "0.3.8"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "siphasher"
@@ -5633,6 +5585,11 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "smallvec"
+version = "1.15.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "socket2"
 version = "0.6.0"
@@ -5652,6 +5609,15 @@ dependencies = [
  "lock_api",
 ]
 
+[[package]]
+name = "spirv"
+version = "0.3.0+sdk-1.3.268.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eda41003dc44290527a59b13432d4a0379379fa074b70174882adfbdfd917844"
+dependencies = [
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
 [[package]]
 name = "spki"
 version = "0.7.3"
@@ -5694,13 +5660,13 @@ dependencies = [
  "hashlink",
  "indexmap 2.13.0",
  "log",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "once_cell",
  "percent-encoding",
  "serde",
  "serde_json",
  "sha2 0.10.9",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "thiserror 2.0.17",
  "tokio",
  "tokio-stream",
@@ -5751,8 +5717,8 @@ source = "git+https://github.com/project-robius/sqlx.git?branch=update_libsqlite
 dependencies = [
  "atoi",
  "base64",
- "bitflags 2.10.0",
- "byteorder",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "bytes",
  "chrono",
  "crc",
@@ -5770,7 +5736,7 @@ dependencies = [
  "itoa",
  "log",
  "md-5",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "once_cell",
  "percent-encoding",
  "rand 0.8.5",
@@ -5778,7 +5744,7 @@ dependencies = [
  "serde",
  "sha1",
  "sha2 0.10.9",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "sqlx-core",
  "stringprep",
  "thiserror 2.0.17",
@@ -5793,8 +5759,8 @@ source = "git+https://github.com/project-robius/sqlx.git?branch=update_libsqlite
 dependencies = [
  "atoi",
  "base64",
- "bitflags 2.10.0",
- "byteorder",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "chrono",
  "crc",
  "dotenvy",
@@ -5809,13 +5775,13 @@ dependencies = [
  "itoa",
  "log",
  "md-5",
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "once_cell",
  "rand 0.8.5",
  "serde",
  "serde_json",
  "sha2 0.10.9",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "sqlx-core",
  "stringprep",
  "thiserror 2.0.17",
@@ -5853,15 +5819,6 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8f112729512f8e442d81f95a8a7ddf2b7c6b8a1a6f509a95864142b30cab2d3"
 
-[[package]]
-name = "strict-num"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6637bab7722d379c8b41ba849228d680cc12d0a45ba1fa2b48f2a30577a06731"
-dependencies = [
- "float-cmp",
-]
-
 [[package]]
 name = "string_cache"
 version = "0.8.9"
@@ -5893,9 +5850,9 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7b4df3d392d81bd458a8a621b8bffbd2302a12ffe288a9d931670948749463b1"
 dependencies = [
- "unicode-bidi",
+ "unicode-bidi 0.3.18 (registry+https://github.com/rust-lang/crates.io-index)",
  "unicode-normalization",
- "unicode-properties",
+ "unicode-properties 0.1.3",
 ]
 
 [[package]]
@@ -5910,16 +5867,6 @@ version = "2.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 
-[[package]]
-name = "svgtypes"
-version = "0.15.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68c7541fff44b35860c1a7a47a7cadf3e4a304c457b58f9870d9706ece028afc"
-dependencies = [
- "kurbo",
- "siphasher",
-]
-
 [[package]]
 name = "syn"
 version = "1.0.109"
@@ -5968,7 +5915,7 @@ version = "0.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3c879d448e9d986b661742763247d3693ed13609438cf3d006f51f5368a5ba6b"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "core-foundation 0.9.4",
  "system-configuration-sys",
 ]
@@ -5993,7 +5940,7 @@ dependencies = [
  "getrandom 0.3.3",
  "once_cell",
  "rustix",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -6087,32 +6034,6 @@ dependencies = [
  "time-core",
 ]
 
-[[package]]
-name = "tiny-skia"
-version = "0.11.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83d13394d44dae3207b52a326c0c85a8bf87f1541f23b0d143811088497b09ab"
-dependencies = [
- "arrayref",
- "arrayvec",
- "bytemuck",
- "cfg-if",
- "log",
- "png",
- "tiny-skia-path",
-]
-
-[[package]]
-name = "tiny-skia-path"
-version = "0.11.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c9e7fc0c2e86a30b117d0462aa261b72b7a99b7ebd7deb3a14ceda95c5bdc93"
-dependencies = [
- "arrayref",
- "bytemuck",
- "strict-num",
-]
-
 [[package]]
 name = "tinystr"
 version = "0.8.1"
@@ -6292,7 +6213,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
 dependencies = [
  "async-compression",
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "bytes",
  "futures-core",
  "futures-util",
@@ -6375,7 +6296,7 @@ dependencies = [
  "once_cell",
  "regex-automata",
  "sharded-slab",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "thread_local",
  "tracing",
  "tracing-core",
@@ -6432,9 +6353,8 @@ dependencies = [
 
 [[package]]
 name = "ttf-parser"
-version = "0.25.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d2df906b07856748fa3f6e0ad0cbaa047052d4a7dd609e231c4f72cee8c36f31"
+version = "0.24.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "tungstenite"
@@ -6492,23 +6412,31 @@ version = "2.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "75b844d17643ee918803943289730bec8aac480150456169e647ed0b576ba539"
 
+[[package]]
+name = "unicase"
+version = "2.9.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5c1cb5db39152898a79168971543b1cb5020dff7fe43c8dc468b0885f5e29df5"
 
+[[package]]
+name = "unicode-bidi"
+version = "0.3.18"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "unicode-bidi-mirroring"
-version = "0.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "56d12260fb92d52f9008be7e4bca09f584780eb2266dc8fecc6a192bec561694"
+version = "0.3.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "unicode-ccc"
-version = "0.1.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc2520efa644f8268dce4dcd3050eaa7fc044fca03961e9998ac7e2e92b77cf1"
+version = "0.3.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "unicode-ident"
@@ -6519,8 +6447,7 @@ checksum = "f63a545481291138910575129486daeaf8ac54aee4387fe7906919f7830c7d9d"
 [[package]]
 name = "unicode-linebreak"
 version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b09c83c3c29d37506a3e260c08c03743a6bb66a9cd432c6934ab501a190571f"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "unicode-normalization"
@@ -6537,11 +6464,15 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e70f2a8b45122e719eb623c01822704c4e0907e7e426a05927e1a1cfff5b75d0"
 
+[[package]]
+name = "unicode-properties"
+version = "0.1.4"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "unicode-script"
-version = "0.5.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fb421b350c9aff471779e262955939f565ec18b86c15364e6bdf0d662ca7c1f"
+version = "0.5.8"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 
 [[package]]
 name = "unicode-segmentation"
@@ -6549,6 +6480,17 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
 
+[[package]]
+name = "unicode-segmentation"
+version = "1.12.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
+[[package]]
+name = "unicode-width"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
+
 [[package]]
 name = "unicode-xid"
 version = "0.2.6"
@@ -6601,28 +6543,6 @@ version = "2.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
 
-[[package]]
-name = "usvg"
-version = "0.42.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b84ea542ae85c715f07b082438a4231c3760539d902e11d093847a0b22963032"
-dependencies = [
- "base64",
- "data-url",
- "flate2",
- "imagesize",
- "kurbo",
- "log",
- "pico-args",
- "roxmltree",
- "simplecss",
- "siphasher",
- "strict-num",
- "svgtypes",
- "tiny-skia-path",
- "xmlwriter",
-]
-
 [[package]]
 name = "utf-8"
 version = "0.7.6"
@@ -6834,7 +6754,7 @@ dependencies = [
  "fancy_constructor",
  "futures-core",
  "js-sys",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "tokio",
  "wasm-bindgen",
  "web-sys",
@@ -6842,35 +6762,30 @@ dependencies = [
 
 [[package]]
 name = "wayland-backend"
-version = "0.3.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "673a33c33048a5ade91a6b139580fa174e19fb0d23f396dca9fa15f2e1e49b35"
+version = "0.3.12"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "cc",
  "downcast-rs",
- "rustix",
+ "libc",
  "scoped-tls",
- "smallvec",
+ "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "wayland-sys",
 ]
 
 [[package]]
 name = "wayland-client"
-version = "0.31.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c66a47e840dc20793f2264eb4b3e4ecb4b75d91c0dd4af04b456128e0bdd449d"
+version = "0.31.12"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "bitflags 2.10.0",
- "rustix",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "libc",
  "wayland-backend",
- "wayland-scanner",
 ]
 
 [[package]]
 name = "wayland-egl"
-version = "0.32.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d36232ee23ba3ea34a6835d68ca1af91d3ca3d6eddcf9c7147c4e0e66901b9fd"
+version = "0.32.9"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
  "wayland-backend",
  "wayland-sys",
@@ -6878,34 +6793,19 @@ dependencies = [
 
 [[package]]
 name = "wayland-protocols"
-version = "0.32.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "efa790ed75fbfd71283bd2521a1cfdc022aabcc28bdcff00851f9e4ae88d9901"
+version = "0.32.10"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "wayland-backend",
  "wayland-client",
- "wayland-scanner",
-]
-
-[[package]]
-name = "wayland-scanner"
-version = "0.31.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "54cb1e9dc49da91950bdfd8b848c49330536d9d1fb03d4bfec8cae50caa50ae3"
-dependencies = [
- "proc-macro2",
- "quick-xml",
- "quote",
 ]
 
 [[package]]
 name = "wayland-sys"
-version = "0.31.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34949b42822155826b41db8e5d0c1be3a2bd296c747577a43a3e6daefc296142"
+version = "0.31.8"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
 dependencies = [
- "dlib",
  "log",
  "pkg-config",
 ]
@@ -6993,13 +6893,23 @@ version = "0.61.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
 dependencies = [
- "windows-collections",
+ "windows-collections 0.2.0",
  "windows-core 0.61.2",
- "windows-future",
+ "windows-future 0.2.1",
  "windows-link 0.1.3",
  "windows-numerics",
 ]
 
+[[package]]
+name = "windows"
+version = "0.62.2"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "windows-collections 0.3.2",
+ "windows-core 0.62.2",
+ "windows-future 0.3.2",
+]
+
 [[package]]
 name = "windows-collections"
 version = "0.2.0"
@@ -7009,6 +6919,14 @@ dependencies = [
  "windows-core 0.61.2",
 ]
 
+[[package]]
+name = "windows-collections"
+version = "0.3.2"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "windows-core 0.62.2",
+]
+
 [[package]]
 name = "windows-core"
 version = "0.56.0"
@@ -7031,7 +6949,17 @@ dependencies = [
  "windows-interface 0.59.2",
  "windows-link 0.1.3",
  "windows-result 0.3.4",
- "windows-strings",
+ "windows-strings 0.4.2",
+]
+
+[[package]]
+name = "windows-core"
+version = "0.62.2"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "windows-link 0.2.1",
+ "windows-result 0.4.1",
+ "windows-strings 0.5.1",
 ]
 
 [[package]]
@@ -7045,6 +6973,14 @@ dependencies = [
  "windows-threading",
 ]
 
+[[package]]
+name = "windows-future"
+version = "0.3.2"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "windows-core 0.62.2",
+]
+
 [[package]]
 name = "windows-implement"
 version = "0.56.0"
@@ -7101,6 +7037,11 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "45e46c0661abb7180e7b9c281db115305d49ca1709ab8242adf09666d2173c65"
 
+[[package]]
+name = "windows-link"
+version = "0.2.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+
 [[package]]
 name = "windows-numerics"
 version = "0.2.0"
@@ -7119,7 +7060,7 @@ checksum = "5b8a9ed28765efc97bbc954883f4e6796c33a06546ebafacbabee9696967499e"
 dependencies = [
  "windows-link 0.1.3",
  "windows-result 0.3.4",
- "windows-strings",
+ "windows-strings 0.4.2",
 ]
 
 [[package]]
@@ -7140,6 +7081,14 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
+[[package]]
+name = "windows-result"
+version = "0.4.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "windows-strings"
 version = "0.4.2"
@@ -7149,6 +7098,14 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
+[[package]]
+name = "windows-strings"
+version = "0.5.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#8ac86f0666f65d24cbe3a146b9cd6011eecec0d2"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.45.0"
@@ -7461,7 +7418,7 @@ version = "0.7.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "21a0236b59786fed61e2a80582dd500fe61f18b5dca67a4a067d0bc9039339cf"
 dependencies = [
- "memchr",
+ "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -7488,12 +7445,6 @@ dependencies = [
  "zeroize",
 ]
 
-[[package]]
-name = "xmlwriter"
-version = "0.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec7a2a501ed189703dba8b08142f057e887dfc4b2cc4db2d343ac6376ba3e0b9"
-
 [[package]]
 name = "xxhash-rust"
 version = "0.8.15"
@@ -7623,18 +7574,3 @@ name = "zmij"
 version = "1.0.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bd8f3f50b848df28f887acb68e41201b5aea6bc8a8dacc00fb40635ff9a72fea"
-
-[[package]]
-name = "zune-core"
-version = "0.4.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3f423a2c17029964870cfaabb1f13dfab7d092a62a29a89264f4d36990ca414a"
-
-[[package]]
-name = "zune-inflate"
-version = "0.2.54"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "73ab332fe2f6680068f3582b16a24f90ad7096d5d39b974d1c0aff0125116f02"
-dependencies = [
- "simd-adler32",
-]
diff --git a/Cargo.toml b/Cargo.toml
index 5c041614c..4072ac4c8 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,26 +1,22 @@
 [package]
 name = "robrix"
-authors = [
-    "Kevin Boos <kevinaboos@gmail.com>",
-    "Robius Project Maintainers",
-]
+authors = ["Kevin Boos <kevinaboos@gmail.com>", "Robius Project Maintainers"]
 description = "A Matrix chat client written using Makepad + Robius app dev framework in Rust."
 documentation = "https://docs.rs/robrix"
-edition = "2024"  ## mostly just to allow let-chains
+edition = "2024"                                                                               ## mostly just to allow let-chains
 homepage = "https://robius.rs/"
 keywords = ["matrix", "chat", "client", "robius", "makepad"]
 license = "MIT"
 readme = "README.md"
-categories = [ "gui" ]
+categories = ["gui"]
 repository = "https://github.com/project-robius/robrix"
 version = "0.0.1-pre-alpha-4"
 metadata.makepad-auto-version = "zqpv-Yj-K7WNVK2I8h5Okhho46Q="
 
 [dependencies]
-makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev", features = ["serde"] }
+makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" }
 makepad-code-editor = { git = "https://github.com/makepad/makepad", branch = "dev" }
 
-
 ## Including this crate automatically configures all `robius-*` crates to work with Makepad.
 robius-use-makepad = "0.1.1"
 robius-open = { git = "https://github.com/project-robius/robius" }
@@ -36,9 +32,11 @@ chrono = "0.4"
 clap = { version = "4.0.16", features = ["derive"] }
 crossbeam-channel = "0.5.10"
 crossbeam-queue = "0.3.8"
-eyeball = { version = "0.8.8", features = ["tracing"] }     # same as matrix-sdk-ui
-eyeball-im = { version = "0.8.0", features = ["tracing"] }  # same as matrix-sdk-ui
-imbl = { version = "6.1.0", features = ["serde"] }          # same as matrix-sdk-ui
+eyeball = { version = "0.8.8", features = ["tracing"] } # same as matrix-sdk-ui
+eyeball-im = { version = "0.8.0", features = [
+    "tracing",
+] } # same as matrix-sdk-ui
+imbl = { version = "6.1.0", features = ["serde"] } # same as matrix-sdk-ui
 futures-util = "0.3"
 hashbrown = { version = "0.16", features = ["raw-entry"] }
 htmlize = "1.0.5"
@@ -46,14 +44,27 @@ indexmap = "2.6.0"
 imghdr = "0.7.0"
 linkify = "0.10.0"
 matrix-sdk-base = { git = "https://github.com/matrix-org/matrix-rust-sdk", branch = "main" }
-matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk", branch = "main", default-features = false, features = [ "e2e-encryption", "automatic-room-key-forwarding", "markdown", "sqlite", "rustls-tls", "bundled-sqlite", "sso-login" ] }
-matrix-sdk-ui = { git = "https://github.com/matrix-org/matrix-rust-sdk", branch = "main", default-features = false, features = [ "rustls-tls" ] }
+matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk", branch = "main", default-features = false, features = [
+    "e2e-encryption",
+    "automatic-room-key-forwarding",
+    "markdown",
+    "sqlite",
+    "rustls-tls",
+    "bundled-sqlite",
+    "sso-login",
+] }
+matrix-sdk-ui = { git = "https://github.com/matrix-org/matrix-rust-sdk", branch = "main", default-features = false, features = [
+    "rustls-tls",
+] }
 ## Use the same ruma version as what's specified in matrix-sdk's Cargo.toml.
 ## Enable a few extra features:
 ## * "compat-optional" feature to allow missing body field in m.room.tombstone event.
 ## * "compat-unset-avatar" feature to allow deleting the user's avatar to work properly.
 ## * Note: we need a feature like "compat-unset-display-name" to unset display names, but that doesn't exist yet.
-ruma = { version = "0.14.1", features = ["compat-optional", "compat-unset-avatar"] } 
+ruma = { version = "0.14.1", features = [
+    "compat-optional",
+    "compat-unset-avatar",
+] }
 rand = "0.8.5"
 rangemap = "1.5.0"
 sanitize-filename = "0.6"
@@ -70,7 +81,10 @@ url = "2.5.0"
 ## Commit "f0bc4625dcd729e07e4a36257df2f1d94c81cef4" is the most recent one without the invalid change to pin serde to 1.0.219.
 ## See my issue here: <https://github.com/openwallet-foundation-labs/tsp/issues/237>.
 ## However, that commit doesn't build.... yikes. So we have to use a slightly older commit in the "rev" field below.
-tsp_sdk = { git = "https://github.com/openwallet-foundation-labs/tsp.git", rev = "1cd0cc9442e144ad7c01ccd30daffbb3a52c0f20", optional = true, features = ["async", "resolve"] }
+tsp_sdk = { git = "https://github.com/openwallet-foundation-labs/tsp.git", rev = "1cd0cc9442e144ad7c01ccd30daffbb3a52c0f20", optional = true, features = [
+    "async",
+    "resolve",
+] }
 quinn = { version = "0.11", default-features = false, optional = true }
 ## We only include this such that we can specify the prebuilt-nasm features,
 ## which is required to build this on Windows x86_64 without having to install NASM separately.
@@ -137,7 +151,7 @@ askar-storage = { git = "https://github.com/openwallet-foundation/askar.git" }
 ## and then we won't need to patch ruma-events anymore.
 ## But that is a significant amount of work, so for now we just patch ruma-events.
 ##
-ruma = { git = "https://github.com/project-robius/ruma.git", branch = "tsp"}
+ruma = { git = "https://github.com/project-robius/ruma.git", branch = "tsp" }
 
 
 [package.metadata.docs.rs]
@@ -158,7 +172,7 @@ lto = "thin"
 [profile.distribution]
 inherits = "release"
 codegen-units = 1
-lto = "fat" 
+lto = "fat"
 
 ## For very fast compilation, not for creating an actual high-quality executable.
 ## This is primarily useful for CI builds.
@@ -171,13 +185,15 @@ strip = true
 debug-assertions = false
 
 
-
 ## Configuration for `cargo packager`
 [package.metadata.packager]
 product_name = "Robrix"
 identifier = "org.robius.robrix"
 category = "SocialNetworking"
-authors = ["Project Robius <contact@robius.rs>", "Kevin Boos <kevinaboos@gmail.com>"]
+authors = [
+    "Project Robius <contact@robius.rs>",
+    "Kevin Boos <kevinaboos@gmail.com>",
+]
 publisher = "robius"
 license_file = "LICENSE-MIT"
 copyright = "Copyright 2023-202, Project Robius"
@@ -221,7 +237,10 @@ robius-packaging-commands before-each-package \
 """
 
 deep_link_protocols = [
-    { schemes = ["robrix", "matrix"], role = "viewer" }, ## `name` is left as default
+    { schemes = [
+        "robrix",
+        "matrix",
+    ], role = "viewer" }, ## `name` is left as default
 ]
 
 [package.metadata.packager.deb]
@@ -231,7 +250,7 @@ section = "utils"
 
 [package.metadata.packager.macos]
 minimum_system_version = "11.0"
-frameworks = [ ]
+frameworks = []
 info_plist_path = "./packaging/Info.plist"
 entitlements = "./packaging/Entitlements.plist"
 signing_identity = "Developer ID Application: AppChef Inc. (SFVQ5V48GD)"
diff --git a/SPLASH.md b/SPLASH.md
new file mode 100644
index 000000000..88af44bba
--- /dev/null
+++ b/SPLASH.md
@@ -0,0 +1,2362 @@
+# Splash Script Manual (Terse AI Reference)
+
+Splash is Makepad's UI scripting language. It is whitespace-delimited, but Robrix prefers either newlines or commas to separate properties, for readability's sake. 
+**Please always use newlines or commas to separate properties, not just whitespace.**
+
+**Do NOT use `Root{}` or `Window{}`** — those are host-level wrappers handled externally. Your output is the content inside a body/splash widget.
+
+---
+
+## NAMING CHILDREN: Use `:=` for dynamic/list properties
+
+In Splash, when you declare a named child widget inside a `let` template (or any container), you use the `:=` operator. This marks the child as a **named/dynamic** property — addressable and overridable per-instance.
+
+- To declare: `label := Label{text: "default"}`
+- To override: `MyTemplate{label.text: "new value"}`
+
+If you write `label:` (colon) instead of `label :=` (colon-equals), the child is a **static** property — not addressable, and overrides fail silently (text becomes invisible).
+
+**Use `:=` for any child you want to reference or override later:** `check :=`, `label :=`, `tag :=`, `title :=`, `body :=`, `icon :=`, `content :=`, etc.
+
+## COPY-PASTE REFERENCE: Todo list
+
+```
+let TodoItem = View{
+    width: Fill height: Fit
+    padding: Inset{top: 8 bottom: 8 left: 12 right: 12}
+    flow: Right spacing: 10
+    align: Align{y: 0.5}
+    check := CheckBox{text: ""}
+    label := Label{text: "task" draw_text.color: #ddd draw_text.text_style.font_size: 11}
+    Filler{}
+    tag := Label{text: "" draw_text.color: #888 draw_text.text_style.font_size: 9}
+}
+
+RoundedView{
+    width: 380 height: Fit
+    flow: Down spacing: 4
+    padding: 16
+    new_batch: true
+    draw_bg.color: #1e1e2e
+    draw_bg.border_radius: 10.0
+    Label{text: "My Tasks" draw_text.color: #fff draw_text.text_style.font_size: 14}
+    Hr{}
+    TodoItem{label.text: "Buy groceries" tag.text: "errands"}
+    TodoItem{label.text: "Fix login bug" tag.text: "urgent"}
+    TodoItem{label.text: "Write unit tests" tag.text: "dev"}
+    TodoItem{label.text: "Call the dentist" tag.text: "personal"}
+}
+```
+
+## COPY-PASTE REFERENCE: Card with title and body
+
+```
+let InfoCard = RoundedView{
+    width: Fill height: Fit
+    padding: 16 flow: Down spacing: 6
+    draw_bg.color: #2a2a3d
+    draw_bg.border_radius: 8.0
+    title := Label{text: "Title" draw_text.color: #fff draw_text.text_style.font_size: 14}
+    body := Label{text: "Body" draw_text.color: #aaa draw_text.text_style.font_size: 11}
+}
+
+View{
+    flow: Down height: Fit spacing: 10 padding: 20
+    InfoCard{title.text: "First card" body.text: "Some content here"}
+    InfoCard{title.text: "Second card" body.text: "More content here"}
+}
+```
+
+---
+
+## 🚫 DO NOT INVENT SYNTAX OR PROPERTIES 🚫
+
+**ONLY use widgets, properties, and syntax documented in this manual.** This code must compile and run — do not:
+
+- Invent new properties (e.g., don't write `background_color:` — use `draw_bg.color:`)
+- Guess at property names (e.g., don't write `font_size:` — use `draw_text.text_style.font_size:`)
+- Make up new widgets that aren't listed here
+- Suggest hypothetical features or syntax that "might work"
+- Use CSS-like property names (no `border-radius`, use `draw_bg.border_radius`)
+
+If you're unsure whether a property exists, **don't use it**. Stick to the exact syntax shown in the examples.
+
+---
+
+## 📝 OUTPUT FORMAT: CODE ONLY 📝
+
+**When generating UI, output ONLY the Splash code.** Do not add:
+
+- Explanatory text before or after the code
+- "Here's the UI:" or "This creates..." preambles
+- Suggestions for improvements or alternatives
+- Commentary about what the code does
+
+Just output the raw Splash script starting with `use mod.prelude.widgets.*` — nothing else.
+
+---
+
+## ⛔⛔⛔ CRITICAL: YOU MUST SET `height: Fit` ON EVERY CONTAINER ⛔⛔⛔
+
+**STOP. READ THIS. THE #1 MISTAKE IS FORGETTING `height: Fit`.**
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  EVERY View, SolidView, RoundedView MUST HAVE height: Fit      │
+│                                                                 │
+│  ✅ View{ flow: Down height: Fit padding: 10 ... }              │
+│                                                                 │
+│  If you forget height: Fit, your UI will be INVISIBLE (0px)    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**Why?** The default is `height: Fill`. Your output renders in a `Fit` container. `Fill` inside `Fit` = circular dependency = **0 height**.
+
+**ALWAYS write `height: Fit` immediately after the opening brace:**
+
+```
+View{ height: Fit flow: Down padding: 10
+    Label{text: "Visible!"}
+}
+
+SolidView{ height: Fit width: Fill draw_bg.color: #333
+    Label{text: "Also visible!"}
+}
+
+RoundedView{ height: Fit width: Fill flow: Down spacing: 8
+    Label{text: "Card content"}
+}
+```
+
+**Exceptions:**
+1. Inside a fixed-height parent, `height: Fill` is OK:
+```
+View{ height: 300  // Fixed parent
+    View{ height: Fill  // OK here - fills the 300px
+        Label{text: "I fill the fixed 300px"}
+    }
+}
+```
+2. **MapView** — has no intrinsic height, so `height: Fit` also gives 0px. Use a **fixed pixel height**: `MapView{width: Fill height: 500}`
+
+**TEMPLATE: Copy this pattern for every container:**
+```
+View{ height: Fit ...rest of properties...
+    ...children...
+}
+```
+
+---
+
+## ⛔⛔⛔ CRITICAL: USE `width: Fill` ON THE ROOT CONTAINER ⛔⛔⛔
+
+**NEVER use a fixed pixel width (e.g., `width: 400`) on your outermost container.** Your output renders inside a container that provides available width — use `width: Fill` to fill it.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  The ROOT container MUST use  width: Fill                       │
+│                                                                 │
+│  ✅ RoundedView{ width: Fill height: Fit ... }                  │
+│  ❌ RoundedView{ width: 400 height: Fit ... }                   │
+│                                                                 │
+│  Fixed widths make your UI a narrow sliver or completely broken │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**Why?** A fixed width like `width: 400` does not adapt to the available space. Worse, if the parent container is narrower than 400, your content gets clipped. If a parse error occurs anywhere in the code, the entire layout can collapse to near-zero width.
+
+**ALWAYS use `width: Fill` on the root element:**
+```
+RoundedView{ width: Fill height: Fit flow: Down
+    // your content
+}
+```
+
+Fixed pixel widths are fine for **inner elements** like icons, avatars, or specific components — just never on the outermost container.
+
+---
+
+## ⛔ CRITICAL: `draw_bg.border_radius` TAKES A FLOAT, NOT AN INSET ⛔
+
+```
+✅ draw_bg.border_radius: 16.0
+❌ draw_bg.border_radius: Inset{top: 0 bottom: 16 left: 0 right: 0}
+```
+
+`border_radius` is a single `f32` value applied uniformly to all corners. Passing an `Inset` or object will cause a parse error that can **silently break your entire layout**.
+
+---
+
+## ⚠️ USE STYLED VIEWS, NOT RAW `View{}` ⚠️
+
+**Do NOT use `View{ show_bg: true ... }`** — the raw View has an ugly green test color as its background.
+
+Instead, use these pre-styled container widgets that have proper backgrounds:
+
+| Widget | Use for |
+|--------|---------|
+| `SolidView` | Simple solid color background |
+| `RoundedView` | Rounded corners with optional border |
+| `RectView` | Rectangle with optional border |
+| `RoundedShadowView` | Rounded corners with drop shadow |
+| `RectShadowView` | Rectangle with drop shadow |
+| `CircleView` | Circular shape |
+| `GradientXView` | Horizontal gradient |
+| `GradientYView` | Vertical gradient |
+
+All have `show_bg: true` already set. Set color via `draw_bg.color`:
+
+```
+SolidView{ width: Fill height: Fit draw_bg.color: #334
+    Label{text: "Content here"}
+}
+
+RoundedView{ width: Fill height: Fit draw_bg.color: #445 draw_bg.border_radius: 8.0
+    Label{text: "Rounded card"}
+}
+
+RoundedShadowView{ width: Fill height: Fit draw_bg.color: #556 draw_bg.shadow_radius: 10.0
+    Label{text: "Card with shadow"}
+}
+```
+
+**Use raw `View{}` only when you need no background** (invisible layout container).
+
+---
+
+## Script Structure
+
+Every splash script must start with a `use` statement to bring widgets into scope:
+
+```
+use mod.prelude.widgets.*
+
+// Now all widgets (View, Label, Button, etc.) are available
+View{
+    flow: Down
+    height: Fit  // ← ALWAYS set height! Default is Fill which breaks in Fit containers
+    padding: 20
+    Label{text: "Hello world"}
+}
+```
+
+Without `use mod.prelude.widgets.*` at the top, widget names like `View`, `Label`, `Button` etc. will not be found.
+
+### Let bindings for reusable definitions
+
+Use `let` to define reusable widget templates. **`let` bindings must be defined ABOVE (before) the places where they are used.** They are local to the current scope.
+
+**When a template has children you want to customize per-instance, you MUST use `id :=` declarations.** See the critical rule below.
+
+```
+use mod.prelude.widgets.*
+
+// Simple template with NO per-instance children — just style overrides
+let MyHeader = Label{
+    draw_text.color: #fff
+    draw_text.text_style.font_size: 16
+}
+
+// Template WITH per-instance children — MUST use id := declarations
+let MyCard = RoundedView{
+    width: Fill height: Fit
+    padding: 15 flow: Down spacing: 8
+    draw_bg.color: #334
+    draw_bg.border_radius: 8.0
+    title := Label{text: "default" draw_text.color: #fff draw_text.text_style.font_size: 16}
+    body := Label{text: "" draw_text.color: #aaa}
+}
+
+// Override children using id.property syntax
+View{
+    flow: Down height: Fit
+    spacing: 12 padding: 20
+    MyCard{title.text: "First Card" body.text: "Content here"}
+    MyCard{title.text: "Second Card" body.text: "More content"}
+}
+```
+
+### Naming children in templates — the `:=` operator
+
+Children inside a `let` template that you want to override per-instance MUST be declared with `:=`. This is part of the syntax — `label :=` creates a named/dynamic child, `label:` does not.
+
+**Reusable todo/list item with multiple named children:**
+
+```
+let TodoItem = View{
+    width: Fill height: Fit
+    padding: Inset{top: 8 bottom: 8 left: 12 right: 12}
+    flow: Right spacing: 8
+    align: Align{y: 0.5}
+    check := CheckBox{text: ""}
+    label := Label{text: "task" draw_text.color: #ddd draw_text.text_style.font_size: 11}
+    Filler{}
+    tag := Label{text: "" draw_text.color: #888 draw_text.text_style.font_size: 9}
+}
+
+View{
+    flow: Down height: Fit spacing: 4
+    TodoItem{label.text: "Walk the dog" tag.text: "personal"}
+    TodoItem{label.text: "Fix login bug" tag.text: "urgent"}
+    TodoItem{label.text: "Buy groceries" tag.text: "errands"}
+}
+```
+
+You can override ANY property on an `id :=` child: `label.draw_text.color: #f00`, `icon.visible: false`, `subtitle.draw_text.text_style.font_size: 10`, etc.
+
+**⛔ Named children inside anonymous containers are UNREACHABLE.** If a `:=` child is nested inside an anonymous `View{}` (no `:=` on the View), the override path cannot find it. The override fails silently and the default text shows instead:
+
+Every container in the path from root to the child must have a `:=` name. Then use the full dot-path to override:
+```
+let Item = View{
+    flow: Right
+    texts := View{                           // named with :=
+        flow: Down
+        label := Label{text: "default"}
+    }
+}
+Item{texts.label.text: "new text"}           // full path through named containers
+```
+
+## Syntax Fundamentals
+
+```
+// Property assignment
+key: value
+
+// Nested object
+key: Type{ prop1: val1 prop2: val2 }
+
+// Merge (extend parent, don't replace)
+key +: { prop: val }
+
+// Dot-path shorthand
+draw_bg.color: #f00
+// equivalent to: draw_bg +: { color: #f00 }
+
+// Named child (:= declares a dynamic/addressable child)
+my_button := Button{ text: "Click" }
+
+// Anonymous child (no name)
+Label{ text: "hello" }
+
+// Let binding (define BEFORE use, local to current scope)
+let MyThing = View{ height: Fit width: Fill }
+
+// Instantiate let binding
+MyThing{}
+
+// Inherit from existing widget type
+MyView = RoundedView{ height: Fit draw_bg.color: #f00 }
+```
+
+## Colors
+
+```
+#f00           // RGB short
+#ff0000        // RGB full
+#ff0000ff      // RGBA
+#0000          // transparent black
+vec4(1.0 0.0 0.0 1.0)  // explicit RGBA
+```
+
+## Sizing (Size enum)
+
+```
+width: Fill          // Fill available space (default)
+width: Fit           // Shrink to content
+width: 200           // Fixed 200px (bare number = Fixed)
+width: Fill{min: 100 max: 500}
+width: Fit{max: Abs(300)}
+height: Fill height: Fit height: 100
+```
+
+## Layout
+
+### Flow (direction children are laid out)
+```
+flow: Right          // default, left-to-right (no wrap)
+flow: Down           // top-to-bottom
+flow: Overlay        // stacked on top of each other
+flow: Flow.Right{wrap: true}  // wrapping horizontal
+flow: Flow.Down{wrap: true}   // wrapping vertical
+```
+
+### Spacing/Padding/Margin
+```
+spacing: 10                    // gap between children
+padding: 15                    // uniform padding (bare number)
+padding: Inset{top: 5 bottom: 5 left: 10 right: 10}
+margin: Inset{top: 2 bottom: 2 left: 5 right: 5}
+margin: 0.                    // uniform zero
+```
+
+### Alignment
+```
+align: Center                  // Align{x:0.5 y:0.5}
+align: HCenter                 // Align{x:0.5 y:0.0}
+align: VCenter                 // Align{x:0.0 y:0.5}
+align: TopLeft                 // Align{x:0.0 y:0.0}
+align: Align{x: 1.0 y: 0.0}   // top-right
+align: Align{x: 0.0 y: 0.5}   // center-left
+```
+
+### Clipping
+```
+clip_x: true    // default
+clip_y: true    // default
+clip_x: false   // overflow visible
+```
+
+## View Widgets (containers)
+
+All inherit from `ViewBase`. Default: no background.
+
+| Widget | Background | Shape |
+|--------|-----------|-------|
+| `View` | none | - |
+| `SolidView` | flat color | rectangle |
+| `RoundedView` | color | rounded rect (`border_radius`) |
+| `RoundedAllView` | color | per-corner radius (`vec4`) |
+| `RoundedXView` | color | left/right radius (`vec2`) |
+| `RoundedYView` | color | top/bottom radius (`vec2`) |
+| `RectView` | color | rectangle with border |
+| `RectShadowView` | color+shadow | rectangle |
+| `RoundedShadowView` | color+shadow | rounded rect |
+| `CircleView` | color | circle |
+| `HexagonView` | color | hexagon |
+| `GradientXView` | horizontal gradient | rectangle |
+| `GradientYView` | vertical gradient | rectangle |
+| `CachedView` | texture-cached | rectangle |
+| `CachedRoundedView` | texture-cached | rounded rect |
+
+### Scrollable Views
+```
+ScrollXYView{}     // scroll both axes
+ScrollXView{}      // horizontal scroll
+ScrollYView{}      // vertical scroll
+```
+
+### View Properties (all containers)
+**⚠️ REMEMBER: Always set `height: Fit` (default is Fill which breaks in chat output!)**
+```
+// Layout (inherited by all containers)
+width: Fill              // Size: Fill | Fit | <number>
+height: Fit              // ⚠️ USE Fit! Default Fill breaks in Fit containers!
+flow: Down               // Flow: Right | Down | Overlay | Flow.Right{wrap:true}
+spacing: 10              // gap between children
+padding: 15              // Inset or bare number
+margin: 0.               // Inset or bare number
+align: Center            // Align preset or Align{x: y:}
+
+// Display
+show_bg: true            // enable background drawing (false by default)
+visible: true
+new_batch: true              // see "Draw Batching" section below
+cursor: MouseCursor.Hand
+grab_key_focus: true
+block_signal_event: false
+capture_overload: false
+clip_x: true
+clip_y: true
+
+// Scrollbar (for ScrollXView/ScrollYView/ScrollXYView)
+scroll_bars: ScrollBar{}
+```
+
+### Draw Batching and `new_batch: true`
+
+In Makepad, widgets that use the same shader are automatically collected into the same GPU draw call for performance. This means if you draw `Label{} SolidView{ Label{} }`, the second Label's text can end up **behind** the SolidView's background — because both Labels are batched into the same text draw call, which executes before the SolidView's background draw call.
+
+**Set `new_batch: true` on any View that has `show_bg: true` AND contains text children.** This tells the View to start a new draw batch, ensuring its background is drawn before its children's text.
+
+**⛔ CRITICAL for hover effects:** If a View has `show_bg: true` with a hover animator (background goes from transparent `#0000` to opaque on hover), you MUST set `new_batch: true` on that View. Without it, when the hover activates the background becomes opaque and covers the text — making text disappear on hover. This is the #1 mistake with hoverable list items.
+
+**When to use `new_batch: true`:**
+- **Any View/SolidView/RoundedView with `show_bg: true` that contains Labels or other text** — always add `new_batch: true`
+- **Hoverable items** — a View with `show_bg: true` + animator hover that contains text MUST have `new_batch: true` or text vanishes on hover
+- **Container of repeated items** that each have their own background — the container itself also needs `new_batch: true`
+- When text appears invisible despite having the correct color — this is almost always a batching issue
+
+```
+// Hoverable item: new_batch ensures text draws on top of hover bg
+let HoverItem = View{
+    width: Fill height: Fit
+    new_batch: true
+    show_bg: true
+    draw_bg +: { color: uniform(#0000) color_hover: uniform(#fff2) hover: instance(0.0) ... }
+    animator: Animator{ hover: { ... } }
+    label := Label{text: "item" draw_text.color: #fff}
+}
+
+// Parent container of repeated items also needs new_batch
+RoundedView{
+    flow: Down height: Fit new_batch: true
+    HoverItem{label.text: "Walk the dog"}
+    HoverItem{label.text: "Do laundry"}
+}
+```
+
+### draw_bg Properties (for SolidView, RoundedView, etc.)
+```
+draw_bg +: {
+    color: instance(#334)        // fill color
+    color_2: instance(vec4(-1))  // gradient end (-1 = disabled)
+    gradient_fill_horizontal: uniform(0.0)  // 0=vertical, 1=horizontal
+    border_size: uniform(1.0)
+    border_radius: uniform(5.0)  // for RoundedView
+    border_color: instance(#888)
+    border_inset: uniform(vec4(0))
+    // Shadow views add:
+    shadow_color: instance(#0007)
+    shadow_radius: uniform(10.0)
+    shadow_offset: uniform(vec2(0 0))
+}
+```
+
+## Text Widgets
+
+### Label
+Properties: `text`, `draw_text` (DrawText), `align`, `flow`, `padding`, `hover_actions_enabled`
+
+**⚠️ Label does NOT support `animator` or `cursor`.** Adding them has no effect — they are silently ignored. To make hoverable/clickable text, wrap a Label inside a `View` with animator+cursor (see Animator section for example).
+
+```
+Label{ text: "Hello" }
+Label{
+    width: Fit height: Fit
+    draw_text.color: #fff
+    draw_text.text_style.font_size: 12
+    text: "Styled"
+}
+```
+
+**⛔ CRITICAL: Default text color is WHITE.** All text widgets (Label, H1, H2, Button text, etc.) default to white (`#fff`). For light/white themes, you MUST explicitly set `draw_text.color` to a dark color on EVERY text element, or text will be invisible (white-on-white). Example:
+For light themes, always set dark text explicitly:
+```
+RoundedView{ draw_bg.color: #f5f5f5 height: Fit new_batch: true
+    Label{text: "Visible!" draw_text.color: #222}
+}
+```
+
+### Label Variants
+| Widget | Description |
+|--------|-------------|
+| `Label` | Default label |
+| `Labelbold` | Bold font |
+| `LabelGradientX` | Horizontal text gradient |
+| `LabelGradientY` | Vertical text gradient |
+| `TextBox` | Full-width, long-form text_style |
+| `P` | Paragraph (like TextBox) |
+| `Pbold` | Bold paragraph |
+
+### Headings
+```
+H1{ text: "Title" }        // font_size_1
+H2{ text: "Subtitle" }     // font_size_2
+H3{ text: "Section" }      // font_size_3
+H4{ text: "Subsection" }   // font_size_4
+```
+
+### draw_text Properties
+```
+draw_text +: {
+    color: #fff
+    color_2: uniform(vec4(-1))           // gradient end (-1 = disabled)
+    color_dither: uniform(1.0)
+    gradient_fill_horizontal: uniform(0.0)
+    text_style: theme.font_regular{ font_size: 11 }
+}
+```
+Available fonts: `theme.font_regular`, `theme.font_bold`, `theme.font_italic`, `theme.font_bold_italic`, `theme.font_code`, `theme.font_icons`
+
+### TextInput
+Properties: `is_password`, `is_read_only`, `is_numeric_only`, `empty_text`, `draw_bg`, `draw_text`, `draw_selection`, `draw_cursor`, `label_align`
+```
+TextInput{ width: Fill height: Fit empty_text: "Placeholder" }
+TextInputFlat{ width: Fill height: Fit empty_text: "Type here" }
+TextInput{ is_password: true empty_text: "Password" }
+TextInput{ is_read_only: true }
+TextInput{ is_numeric_only: true }
+```
+
+### LinkLabel
+Properties: same as Button (text, draw_text, draw_bg, icon_walk, label_walk)
+```
+LinkLabel{ text: "Click me" }
+```
+
+### TextFlow (rich text container, used by Markdown/Html)
+```
+TextFlow{
+    width: Fill height: Fit
+    selectable: true
+    font_size: 10
+}
+```
+
+### Markdown / Html (feature-gated)
+```
+Markdown{
+    width: Fill height: Fit
+    selectable: true
+    body: "# Title\n\nParagraph with **bold**"
+}
+Html{
+    width: Fill height: Fit
+    body: "<h3>Title</h3><p>Content</p>"
+}
+```
+
+## Button Widgets
+
+Properties: `text`, `draw_bg` (DrawQuad), `draw_text` (DrawText), `draw_icon` (DrawSvg), `icon_walk`, `label_walk`, `grab_key_focus`, `animator`
+
+```
+Button{ text: "Standard" }
+ButtonFlat{ text: "Flat" }        // no bevel border
+ButtonFlatter{ text: "Minimal" }  // invisible bg
+
+// With icon
+Button{
+    text: "Save"
+    icon_walk: Walk{width: 16 height: 16}
+    draw_icon.color: #fff
+    draw_icon.svg: crate_resource("self://path/to/icon.svg")
+}
+
+// Customize colors
+ButtonFlat{
+    text: "Custom"
+    draw_bg +: {
+        color: uniform(#336)
+        color_hover: uniform(#449)
+        color_down: uniform(#225)
+    }
+    draw_text +: {
+        color: #fff
+    }
+}
+```
+
+### Button draw_bg Instance Variables
+These are per-instance floats driven by the animator:
+`hover`, `down`, `focus`, `disabled`
+
+Color uniforms (each with `_hover`, `_down`, `_focus`, `_disabled` variants):
+`color`, `color_2`, `border_color`, `border_color_2`
+
+Other: `border_size`, `border_radius`, `color_dither`, `gradient_fill_horizontal`, `gradient_border_horizontal`
+
+## Toggle Widgets
+
+CheckBox/Toggle share a base. Properties: `text`, `draw_bg`, `draw_text`, `draw_icon`, `icon_walk`, `label_walk`, `label_align`, `animator`
+
+```
+CheckBox{ text: "Enable" }
+CheckBoxFlat{ text: "Flat style" }
+Toggle{ text: "Dark mode" }
+ToggleFlat{ text: "Flat toggle" }
+CheckBoxCustom{ text: "Custom" }
+```
+
+### CheckBox draw_bg Instance Variables
+Animator-driven: `hover`, `down`, `focus`, `active`, `disabled`
+Uniforms: `size`, `border_size`, `border_radius`
+Color uniforms (each with `_hover`, `_down`, `_active`, `_focus`, `_disabled`): `color`, `border_color`, `mark_color`
+Also: `mark_size`
+
+### RadioButton
+Properties: same as CheckBox
+```
+RadioButton{ text: "Option A" }
+RadioButtonFlat{ text: "Option A" }
+```
+
+## Input Widgets
+
+### Slider
+Properties: `text`, `min`, `max`, `step`, `default`, `precision`, `axis` (DragAxis), `label_walk`, `label_align`, `draw_bg`, `draw_text`, `bind`
+```
+Slider{ width: Fill text: "Volume" min: 0.0 max: 100.0 default: 50.0 }
+SliderMinimal{ text: "Value" min: 0.0 max: 1.0 step: 0.01 precision: 2 }
+```
+
+### DropDown
+Properties: `labels` (string array), `draw_bg`, `draw_text`, `popup_menu`, `bind`, `bind_enum`
+```
+DropDown{ labels: ["Option A" "Option B" "Option C"] }
+DropDownFlat{ labels: ["Small" "Medium" "Large"] }
+```
+
+## Media
+
+### Image
+Properties: `draw_bg` (DrawImage), `fit` (ImageFit), `min_width`, `min_height`, `width_scale`, `animation` (ImageAnimation)
+```
+Image{ width: 200 height: 150 fit: ImageFit.Stretch }
+// ImageFit: Stretch | Horizontal | Vertical | Smallest | Biggest | Size
+// ImageAnimation: Stop | Once | Loop | Bounce | OnceFps(60) | LoopFps(25) | BounceFps(25)
+```
+
+### DrawImage Properties
+```
+draw_bg +: {
+    opacity: 1.0
+    image_scale: vec2(1.0 1.0)
+    image_pan: vec2(0.0 0.0)
+    image_texture: texture_2d(float)
+}
+```
+
+### Icon
+Properties: `draw_bg`, `draw_icon` (DrawSvg), `icon_walk`
+```
+Icon{
+    draw_icon.svg: crate_resource("self://resources/icons/my_icon.svg")
+    draw_icon.color: #0ff
+    icon_walk: Walk{width: 32 height: 32}
+}
+```
+
+### LoadingSpinner
+A View with animated arc shader. Properties: `color`, `rotation_speed`, `border_size`, `stroke_width`, `max_gap_ratio`, `min_gap_ratio`
+```
+LoadingSpinner{ width: 40 height: 40 }
+```
+
+## Layout Widgets
+
+### Hr / Vr (dividers)
+```
+Hr{}     // horizontal rule
+Vr{}     // vertical rule
+```
+
+### Filler (spacer)
+```
+Filler{}   // View{width: Fill height: Fill} - pushes siblings apart
+```
+
+**⛔ Do NOT use `Filler{}` next to a `width: Fill` sibling in `flow: Right`.** Both compete for remaining space and split it 50/50, causing text to be clipped halfway. Instead, give the content element `width: Fill` — it naturally pushes `width: Fit` siblings to the edge. Only use `Filler{}` between `width: Fit` siblings:
+```
+// Filler between Fit siblings — correct use
+View{ flow: Right
+    Label{text: "left"}
+    Filler{}
+    Label{text: "right"}
+}
+
+// width: Fill takes remaining space, pushes Fit siblings right — no Filler needed
+View{ flow: Right
+    texts := View{ width: Fill height: Fit flow: Down
+        label := Label{text: "title"}
+        sub := Label{text: "subtitle"}
+    }
+    tag := Label{text: "tag"}
+}
+```
+
+### Splitter
+Properties: `axis` (SplitterAxis), `align` (SplitterAlign), `a`, `b`, `size`, `min_horizontal`, `max_horizontal`, `min_vertical`, `max_vertical`, `draw_bg`
+```
+Splitter{
+    axis: SplitterAxis.Horizontal   // Horizontal | Vertical
+    align: SplitterAlign.FromA(250.0) // FromA(px) | FromB(px) | Weighted(0.5)
+    a := left_panel
+    b := right_panel
+}
+```
+Note: `a` and `b` reference named children — use `a := left_panel` (the `:=` operator) to bind them.
+
+### FoldHeader (collapsible section)
+Properties: `body_walk`, `animator` (with `active` group: `on`/`off` states controlling `opened` float)
+```
+FoldHeader{
+    header: View{ height: Fit
+        flow: Right align: Align{y: 0.5} spacing: 8
+        FoldButton{}
+        Label{text: "Section Title"}
+    }
+    body: View{ height: Fit
+        flow: Down padding: Inset{left: 23} spacing: 8
+        // content
+    }
+}
+```
+
+## List Widgets
+
+### PortalList (virtualized list)
+Properties: `flow`, `scroll_bar`, `capture_overload`, `selectable`, `drag_scrolling`, `auto_tail`
+Define templates with `:=` declarations. Templates are instantiated by host code at draw time.
+```
+list := PortalList{
+    width: Fill height: Fill
+    flow: Down
+    scroll_bar: ScrollBar{}
+    Item := View{
+        width: Fill height: Fit
+        title := Label{text: ""}
+    }
+    Header := View{ height: Fit ... }
+}
+```
+
+### FlatList (non-virtualized)
+```
+FlatList{
+    width: Fill height: Fill
+    flow: Down
+    Item := View{ height: Fit ... }
+}
+```
+
+### ScrollBar
+Properties: `bar_size`, `bar_side_margin`, `min_handle_size`, `draw_bg`
+```
+ScrollBar{
+    bar_size: 10.0
+    bar_side_margin: 3.0
+    min_handle_size: 30.0
+}
+```
+
+## Dock System
+
+The Dock is a tabbed panel layout with splitters, tabs, and content templates. Three sections:
+1. **`tab_bar +:`** — define tab header templates (appearance of tab buttons)
+2. **`root :=`** — the layout tree of DockSplitter/DockTabs
+3. **Content templates** — `Name := Widget{}` defines content instantiated by tabs
+
+### Dock Properties
+`tab_bar` (TabBar widget for tab headers), `splitter` (Splitter widget), `round_corner`, `drag_target_preview`, `padding`
+
+### DockSplitter
+`axis` (SplitterAxis), `align` (SplitterAlign), `a` (LiveId ref), `b` (LiveId ref)
+
+### DockTabs
+`tabs` (array of tab refs), `selected` (index), `closable`
+
+### DockTab
+`name` (string), `template` (ref to tab_bar template), `kind` (ref to content template)
+
+### Complete Dock Example (from Makepad Studio)
+```
+Dock{
+    width: Fill height: Fill
+
+    // 1. Tab header templates (how tab buttons look)
+    tab_bar +: {
+        FilesTab := IconTab{
+            draw_icon +: {
+                color: #80FFBF
+                svg: crate_resource("self://resources/icons/icon_file.svg")
+            }
+        }
+        EditTab := IconTab{
+            draw_icon +: {
+                color: #FFB368
+                svg: crate_resource("self://resources/icons/icon_editor.svg")
+            }
+        }
+        LogTab := IconTab{
+            draw_icon +: {
+                color: #80FFBF
+                svg: crate_resource("self://resources/icons/icon_log.svg")
+            }
+        }
+    }
+
+    // 2. Layout tree
+    root := DockSplitter{
+        axis: SplitterAxis.Horizontal
+        align: SplitterAlign.FromA(250.0)
+        a := left_tabs
+        b := right_split
+    }
+
+    right_split := DockSplitter{
+        axis: SplitterAxis.Vertical
+        align: SplitterAlign.FromB(200.0)
+        a := center_tabs
+        b := bottom_tabs
+    }
+
+    left_tabs := DockTabs{
+        tabs: [@files_tab]
+        selected: 0
+    }
+
+    center_tabs := DockTabs{
+        tabs: [@edit_tab]
+        selected: 0
+    }
+
+    bottom_tabs := DockTabs{
+        tabs: [@log_tab]
+        selected: 0
+    }
+
+    // 3. Tab definitions (connect header template to content template)
+    files_tab := DockTab{
+        name: "Files"
+        template := FilesTab        // references tab_bar template
+        kind := FileTreeContent     // references content template
+    }
+
+    edit_tab := DockTab{
+        name: "Editor"
+        template := EditTab
+        kind := EditorContent
+    }
+
+    log_tab := DockTab{
+        name: "Log"
+        template := LogTab
+        kind := LogContent
+    }
+
+    // 4. Content templates (instantiated when tab is shown)
+    FileTreeContent := View{
+        flow: Down
+        width: Fill height: Fill
+        Label{text: "File tree here"}
+    }
+
+    EditorContent := View{
+        flow: Down
+        width: Fill height: Fill
+        Label{text: "Editor here"}
+    }
+
+    LogContent := View{
+        flow: Down
+        width: Fill height: Fill
+        Label{text: "Log here"}
+    }
+}
+```
+
+Dock variants: `Dock` (rounded corners), `DockFlat` (flat style)
+
+## Navigation
+
+### Modal
+Properties: inherits View (flow: Overlay, align: Center). Contains `bg_view` (backdrop) and `content` (dialog body), both declared with `:=`.
+```
+my_modal := Modal{
+    content +: {
+        width: 300 height: Fit
+        RoundedView{ height: Fit
+            padding: 20 flow: Down spacing: 10
+            draw_bg.color: #333
+            Label{text: "Dialog Title"}
+            close := ButtonFlat{text: "Close"}
+        }
+    }
+}
+```
+
+### Tooltip
+```
+tooltip := Tooltip{}
+```
+
+### PopupNotification
+```
+popup := PopupNotification{
+    align: Align{x: 1.0 y: 0.0}
+    content +: { ... }
+}
+```
+
+### SlidePanel
+Properties: `side` (SlideSide), inherits View. Animated `active` float.
+```
+panel := SlidePanel{
+    side: SlideSide.Left   // Left | Right | Top
+    width: 200
+    height: Fill
+    // child content
+}
+```
+
+### ExpandablePanel
+Properties: `initial_offset`, inherits View (flow: Overlay). First child = background, `panel` (declared with `:=`) = draggable overlay.
+```
+ExpandablePanel{
+    width: Fill height: Fill
+    initial_offset: 100.0
+    View{ height: Fit ... }          // background
+    panel := View{ height: Fit ... }  // draggable panel
+}
+```
+
+### PageFlip
+Properties: `active_page` (LiveId), `lazy_init`. Children are page templates declared with `:=`.
+```
+PageFlip{
+    active_page := page1
+    page1 := View{ height: Fit ... }
+    page2 := View{ height: Fit ... }
+}
+```
+
+### StackNavigation
+```
+StackNavigation{
+    root_view := View{ height: Fit ... }
+    // StackNavigationViews added as children
+}
+```
+
+### SlidesView
+```
+SlidesView{
+    slide1 := Slide{
+        title := H1{text: "Title"}
+        SlideBody{text: "Content"}
+    }
+    slide2 := SlideChapter{
+        title := H1{text: "Chapter"}
+    }
+}
+```
+
+### FileTree
+```
+FileTree{}
+// Driven programmatically: begin_folder/end_folder/file
+```
+
+## Shader System
+
+### Instance vs Uniform
+```
+draw_bg +: {
+    hover: instance(0.0)      // per-draw-call, animatable by Animator
+    color: uniform(#fff)       // shared across all instances of this shader variant
+    tex: texture_2d(float)     // texture sampler
+    my_var: varying(vec2(0))   // vertex→pixel interpolated (set in vertex shader)
+}
+```
+**When to use each:**
+- `instance()` — state that varies per widget (hover, down, focus, active, disabled), per-widget colors, scale/pan. Driven by the Animator system.
+- `uniform()` — theme constants shared by all instances (border_size, border_radius, theme colors). Cannot be animated.
+
+### Pixel Shader
+```
+draw_bg +: {
+    pixel: fn() {
+        let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+        sdf.box(0. 0. self.rect_size.x self.rect_size.y 4.0)
+        sdf.fill(#f00)
+        return sdf.result  // already premultiplied by sdf.fill(), no Pal.premul() needed
+    }
+}
+```
+
+**⛔ CRITICAL: Premultiply colors returned from pixel()!** When you hand-code a `pixel: fn()` that returns a color (not via `sdf.result`), you MUST premultiply the alpha. Without this, colors with alpha (e.g. `#ffffff08`) will render as bright white instead of a subtle tint. Always wrap your return value in `Pal.premul()`:
+```
+pixel: fn(){
+    return Pal.premul(self.color.mix(self.color_hover, self.hover))
+}
+```
+Note: `sdf.fill()` / `sdf.stroke()` already premultiply internally, so `return sdf.result` is safe without extra `Pal.premul()`.
+
+**Common pattern — fill + border stroke:**
+```
+pixel: fn() {
+    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+    sdf.box(1. 1. self.rect_size.x - 2. self.rect_size.y - 2. 4.0)
+    sdf.fill_keep(self.color)           // fill the shape, keep it for stroke
+    sdf.stroke(self.border_color, 1.0)  // stroke the same shape's outline
+    return sdf.result
+}
+```
+
+### SDF Primitives
+```
+sdf.circle(cx cy radius)
+sdf.rect(x y w h)
+sdf.box(x y w h border_radius)
+sdf.box_all(x y w h r_lt r_rt r_rb r_lb)   // per-corner radius
+sdf.box_x(x y w h r_left r_right)
+sdf.box_y(x y w h r_top r_bottom)
+sdf.hexagon(cx cy radius)
+sdf.hline(y half_height)
+sdf.arc_round_caps(cx cy radius start_angle end_angle thickness)
+sdf.arc_flat_caps(cx cy radius start_angle end_angle thickness)
+```
+
+### SDF Path Operations
+```
+sdf.move_to(x y)
+sdf.line_to(x y)
+sdf.close_path()
+```
+
+### SDF Combinators
+
+These operate on the **current** shape and the **previous** shape. Draw two primitives, then combine:
+```
+sdf.union()        // merge shapes together (min of distances)
+sdf.intersect()    // keep only overlap (max of distances)
+sdf.subtract()     // cut current shape from previous shape
+sdf.gloop(k)       // smooth/gooey union with rounding factor k
+sdf.blend(k)       // linear blend: 0.0 = previous shape, 1.0 = current shape
+```
+Example — ring (circle with hole):
+```
+sdf.circle(cx cy outer_radius)
+sdf.circle(cx cy inner_radius)
+sdf.subtract()
+sdf.fill(#fff)
+```
+Example — blend for toggle animation:
+```
+sdf.circle(x y r)         // ring shape (from subtract above)
+sdf.circle(x y r)         // solid circle
+sdf.blend(self.active)    // animate between ring (0) and solid (1)
+```
+
+### SDF Drawing
+```
+sdf.fill(color)           // fill and reset shape
+sdf.fill_keep(color)      // fill, keep shape for subsequent stroke
+sdf.stroke(color width)   // stroke and reset shape
+sdf.stroke_keep(color w)  // stroke, keep shape
+sdf.glow(color width)     // additive glow around shape, reset
+sdf.glow_keep(color w)    // additive glow, keep shape
+sdf.clear(color)          // clear result buffer with color
+```
+
+### SDF Transforms
+```
+sdf.translate(x y)
+sdf.rotate(angle cx cy)
+sdf.scale(factor cx cy)
+```
+
+### Built-in Shader Variables
+```
+self.pos              // vec2: normalized position [0,1] (computed from clipping in vertex shader)
+self.rect_size        // vec2: pixel size of the drawn rect
+self.rect_pos         // vec2: pixel position of the drawn rect
+self.dpi_factor       // float: display DPI factor for high-DPI screens
+self.draw_pass.time   // float: elapsed time in seconds (for continuous animation)
+self.draw_pass.dpi_dilate  // float: DPI dilation factor for pixel-perfect strokes
+self.draw_depth       // float: base depth for z-ordering
+self.draw_zbias       // float: z-bias offset added to depth
+self.geom_pos         // vec2: raw geometry position [0,1] (before clipping)
+```
+
+### Vertex Shader
+
+Most widgets use the default vertex shader from DrawQuad. You can override it for custom geometry expansion (e.g., shadows) or DPI-aware texture coordinates:
+```
+draw_bg +: {
+    // custom varying to pass data from vertex to pixel shader
+    my_scale: varying(vec2(0))
+
+    vertex: fn() {
+        let dpi = self.dpi_factor
+        let ceil_size = ceil(self.rect_size * dpi) / dpi
+        self.my_scale = self.rect_size / ceil_size
+        return self.clip_and_transform_vertex(self.rect_pos self.rect_size)
+    }
+    pixel: fn() {
+        // my_scale is available here, interpolated from vertex
+        return Pal.premul(self.color)
+    }
+}
+```
+`self.clip_and_transform_vertex(rect_pos rect_size)` is the standard helper that handles clipping, view shift (scrolling), and camera projection. Always call it in custom vertex shaders.
+
+### Custom Shader Functions
+
+You can define named functions on a draw shader for reuse:
+```
+draw_bg +: {
+    get_color: fn() {
+        return self.color
+            .mix(self.color_hover, self.hover)
+            .mix(self.color_down, self.down)
+    }
+    pixel: fn() {
+        return Pal.premul(self.get_color())
+    }
+}
+```
+Functions with parameters:
+```
+draw_bg +: {
+    get_color_at: fn(scale: vec2, pan: vec2) {
+        return self.my_texture.sample(self.pos * scale + pan)
+    }
+}
+```
+
+### Mutable Variables
+
+Use `let mut` to declare mutable variables in shader code:
+```
+pixel: fn() {
+    let mut color = self.color
+    if self.hover > 0.5 {
+        color = self.color_hover
+    }
+    return Pal.premul(color)
+}
+```
+
+### Conditionals and Match
+
+Shaders support `if`/`else` and `match` on enum instance variables:
+```
+pixel: fn() {
+    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+    if self.is_vertical > 0.5 {
+        sdf.box(1. self.rect_size.y * self.scroll_pos 8. self.rect_size.y * self.handle_size 2.)
+    } else {
+        sdf.box(self.rect_size.x * self.scroll_pos 1. self.rect_size.x * self.handle_size 8. 2.)
+    }
+    sdf.fill(self.color)
+    return sdf.result
+}
+```
+
+### Texture Sampling
+
+Declare texture samplers and sample them in pixel shaders:
+```
+draw_bg +: {
+    my_tex: texture_2d(float)
+    pixel: fn() {
+        let color = self.my_tex.sample(self.pos)          // standard 2D sampling
+        return Pal.premul(color)
+    }
+}
+```
+Alternative sampling functions:
+```
+sample2d(self.my_tex, uv)        // free-function form of texture sampling
+sample2d_rt(self.image, uv)      // sample from render-target texture (handles Y-flip on some platforms)
+```
+
+### Color Operations
+```
+mix(color1 color2 factor)                   // linear interpolation (free function)
+color1.mix(color2 factor)                   // method chaining form
+#f00.mix(#0f0 0.5).mix(#00f hover)          // multi-chain for state interpolation
+Pal.premul(color)                           // premultiply alpha — REQUIRED when returning from pixel()!
+Pal.hsv2rgb(vec4(h s v 1.0))               // HSV to RGB conversion
+Pal.rgb2hsv(color)                          // RGB to HSV conversion
+Pal.iq(t a b c d)                           // Inigo Quilez cosine color palette
+Pal.iq0(t) .. Pal.iq7(t)                   // pre-built cosine color palettes
+```
+⚠️ Always wrap your final color in `Pal.premul()` when returning from `pixel: fn()` (unless returning `sdf.result` which is already premultiplied).
+
+**Gradient pattern** — use `vec4(-1.0, -1.0, -1.0, -1.0)` as a sentinel for "no gradient", then check with `if self.color_2.x > -0.5`:
+```
+color_2: uniform(vec4(-1.0, -1.0, -1.0, -1.0))   // sentinel: no gradient
+pixel: fn() {
+    let mut fill = self.color
+    if self.color_2.x > -0.5 {
+        let dither = Math.random_2d(self.pos.xy) * 0.04
+        let dir = self.pos.y + dither
+        fill = mix(self.color, self.color_2, dir)
+    }
+    return Pal.premul(fill)
+}
+```
+
+### SDF Anti-aliasing
+
+The `sdf.aa` field controls anti-aliasing sharpness. Default is computed from viewport. Set higher for sharper edges:
+```
+pixel: fn() {
+    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+    sdf.aa = sdf.aa * 3.0   // sharper edges (useful for small icons)
+    sdf.move_to(c.x - sz, c.y - sz)
+    sdf.line_to(c.x + sz, c.y + sz)
+    sdf.stroke(#fff, 0.5 + 0.5 * self.draw_pass.dpi_dilate)
+    return sdf.result
+}
+```
+
+### SDF fill_premul / fill_keep_premul
+
+When filling with a color that is already premultiplied (e.g., from a texture sample or render target):
+```
+sdf.fill_premul(color)           // fill with premultiplied color, reset shape
+sdf.fill_keep_premul(color)      // fill with premultiplied color, keep shape
+```
+
+### GaussShadow (box shadows)
+```
+GaussShadow.box_shadow(lower upper point sigma)                    // fast rectangular shadow
+GaussShadow.rounded_box_shadow(lower upper point sigma corner)     // rounded rectangle shadow
+```
+Used in shadow view variants (`RectShadowView`, `RoundedShadowView`) to render drop shadows efficiently.
+
+### Math Utilities
+```
+// Custom Makepad functions
+Math.random_2d(vec2)      // pseudo-random 0-1 from vec2 seed (for dithering)
+Math.rotate_2d(v angle)   // 2D rotation of vector by angle
+
+// Constants
+PI                         // 3.14159...
+E                          // 2.71828...
+TORAD                      // degrees→radians multiplier (0.01745...)
+GOLDEN                     // golden ratio (1.61803...)
+
+// Standard GLSL math (all work on float, vec2, vec3, vec4)
+sin(x) cos(x) tan(x) asin(x) acos(x) atan(y x)
+pow(x y) sqrt(x) exp(x) exp2(x) log(x) log2(x)
+abs(x) sign(x) floor(x) ceil(x) fract(x) mod(x y)
+min(x y) max(x y) clamp(x min max)
+step(edge x) smoothstep(edge0 edge1 x)
+
+// Vector operations
+length(v) distance(a b) dot(a b) cross(a b) normalize(v)
+
+// Fragment-only (for advanced anti-aliasing)
+dFdx(v) dFdy(v)           // partial derivatives (used in text SDF rendering)
+```
+
+## Animator
+
+The animator drives `instance()` variables on draw shaders over time, enabling hover effects, transitions, and looping animations.
+
+### ⛔ CRITICAL: Only Certain Widgets Support Animator ⛔
+
+**NOT all widgets have an `animator` field.** If you add `animator: Animator{...}` to a widget that doesn't support it, the definition is **silently ignored** — no error, no hover, nothing happens.
+
+**Widgets that SUPPORT animator:** `View`, `SolidView`, `RoundedView`, `ScrollXView`, `ScrollYView`, `ScrollXYView`, `Button`, `ButtonFlat`, `ButtonFlatter`, `CheckBox`, `Toggle`, `RadioButton`, `LinkLabel`, `TextInput`
+
+**Widgets that DO NOT support animator:** `Label`, `H1`–`H4`, `P`, `TextBox`, `Image`, `Icon`, `Markdown`, `Html`, `Slider`, `DropDown`, `Splitter`, `Hr`, `Filler`
+
+**To make a Label hoverable, wrap it in a View:**
+```
+View{
+    width: Fill height: Fit
+    cursor: MouseCursor.Hand
+    show_bg: true
+    draw_bg +: {
+        color: uniform(#0000)
+        color_hover: uniform(#fff2)
+        hover: instance(0.0)
+        pixel: fn(){
+            return Pal.premul(self.color.mix(self.color_hover, self.hover))
+        }
+    }
+    animator: Animator{
+        hover: {
+            default: @off
+            off: AnimatorState{
+                from: {all: Forward {duration: 0.15}}
+                apply: {draw_bg: {hover: 0.0}}
+            }
+            on: AnimatorState{
+                from: {all: Forward {duration: 0.15}}
+                apply: {draw_bg: {hover: 1.0}}
+            }
+        }
+    }
+    Label{text: "hoverable item" draw_text.color: #fff}
+}
+```
+
+### Structure
+
+```
+animator: Animator{
+    <group_name>: {
+        default: @<state_name>       // initial state (@ prefix required)
+        <state_name>: AnimatorState{
+            from: { ... }            // transition timing
+            ease: <EaseFunction>     // optional ease override
+            redraw: true             // optional: force redraw each frame
+            apply: { ... }           // target values
+        }
+        <state_name>: AnimatorState{ ... }
+    }
+    <group_name>: { ... }           // multiple groups allowed
+}
+```
+
+### Groups
+Each group is an independent animation track (e.g. `hover`, `focus`, `active`, `disabled`, `time`). Multiple groups animate simultaneously without interfering.
+
+### The `from` Block
+Controls when/how the transition plays. Keys are state names being transitioned FROM, or `all` as catch-all:
+```
+from: {all: Forward {duration: 0.2}}           // from any state
+from: {all: Snap}                               // instant from any state
+from: {
+    all: Forward {duration: 0.1}                // default
+    down: Forward {duration: 0.01}              // faster when coming from "down"
+}
+```
+
+### The `apply` Block
+Target values to animate TO. The structure mirrors the widget's property tree. Keys are the widget's sub-objects (like `draw_bg`, `draw_text`), values are the shader instance variables to animate:
+
+```
+apply: {
+    draw_bg: {hover: 1.0}                      // animate draw_bg.hover to 1.0
+    draw_text: {hover: 1.0}                     // animate draw_text.hover to 1.0
+}
+```
+
+Multiple properties in one block:
+```
+apply: {
+    draw_bg: {down: 1.0, hover: 0.5}
+    draw_text: {down: 1.0, hover: 0.5}
+}
+```
+
+For non-draw properties (e.g. a float field on the widget itself):
+```
+apply: {
+    opened: 1.0                                 // animate widget's own "opened" field
+    active: 0.0                                 // animate widget's own "active" field
+}
+```
+
+### snap() — Instant Jump
+Wrapping a value in `snap()` makes it jump instantly instead of interpolating:
+```
+apply: {
+    draw_bg: {down: snap(1.0), hover: 1.0}     // down jumps, hover interpolates
+}
+```
+
+### timeline() — Keyframes
+Animate through multiple values over the duration using time/value pairs (times 0.0–1.0):
+```
+apply: {
+    draw_bg: {anim_time: timeline(0.0 0.0  1.0 1.0)}   // linear 0→1
+}
+```
+
+### Complete Button Animator Example
+```
+animator: Animator{
+    disabled: {
+        default: @off
+        off: AnimatorState{
+            from: {all: Forward {duration: 0.}}
+            apply: {
+                draw_bg: {disabled: 0.0}
+                draw_text: {disabled: 0.0}
+            }
+        }
+        on: AnimatorState{
+            from: {all: Forward {duration: 0.2}}
+            apply: {
+                draw_bg: {disabled: 1.0}
+                draw_text: {disabled: 1.0}
+            }
+        }
+    }
+    hover: {
+        default: @off
+        off: AnimatorState{
+            from: {all: Forward {duration: 0.1}}
+            apply: {
+                draw_bg: {down: 0.0, hover: 0.0}
+                draw_text: {down: 0.0, hover: 0.0}
+            }
+        }
+        on: AnimatorState{
+            from: {
+                all: Forward {duration: 0.1}
+                down: Forward {duration: 0.01}
+            }
+            apply: {
+                draw_bg: {down: 0.0, hover: snap(1.0)}
+                draw_text: {down: 0.0, hover: snap(1.0)}
+            }
+        }
+        down: AnimatorState{
+            from: {all: Forward {duration: 0.2}}
+            apply: {
+                draw_bg: {down: snap(1.0), hover: 1.0}
+                draw_text: {down: snap(1.0), hover: 1.0}
+            }
+        }
+    }
+    focus: {
+        default: @off
+        off: AnimatorState{
+            from: {all: Snap}
+            apply: {
+                draw_bg: {focus: 0.0}
+                draw_text: {focus: 0.0}
+            }
+        }
+        on: AnimatorState{
+            from: {all: Snap}
+            apply: {
+                draw_bg: {focus: 1.0}
+                draw_text: {focus: 1.0}
+            }
+        }
+    }
+    time: {
+        default: @off
+        off: AnimatorState{
+            from: {all: Forward {duration: 0.}}
+            apply: {}
+        }
+        on: AnimatorState{
+            from: {all: Loop {duration: 1.0, end: 1000000000.0}}
+            apply: {
+                draw_bg: {anim_time: timeline(0.0 0.0  1.0 1.0)}
+            }
+        }
+    }
+}
+```
+
+### Play Types (transition modes)
+```
+Forward {duration: 0.2}                        // play once forward
+Snap                                            // instant (no interpolation)
+Reverse {duration: 0.2, end: 1.0}             // play in reverse
+Loop {duration: 1.0, end: 1000000000.0}        // repeat forward
+ReverseLoop {duration: 1.0, end: 1.0}         // repeat in reverse
+BounceLoop {duration: 1.0, end: 1.0}          // bounce back and forth
+```
+
+### Ease Functions
+```
+Linear                  // default
+InQuad  OutQuad  InOutQuad
+InCubic OutCubic InOutCubic
+InQuart OutQuart InOutQuart
+InQuint OutQuint InOutQuint
+InSine  OutSine  InOutSine
+InExp   OutExp   InOutExp
+InCirc  OutCirc  InOutCirc
+InElastic  OutElastic  InOutElastic
+InBack     OutBack     InOutBack
+InBounce   OutBounce   InOutBounce
+ExpDecay {d1: 0.82, d2: 0.97, max: 100}
+Pow {begin: 0.0, end: 1.0}
+Bezier {cp0: 0.0, cp1: 0.0, cp2: 1.0, cp3: 1.0}
+```
+
+## Theme Variables (prefix: `theme.`)
+
+### Spacing
+`space_1` `space_2` `space_3`
+
+### Inset Presets
+`mspace_1` `mspace_2` `mspace_3` (uniform)
+`mspace_h_1` `mspace_h_2` `mspace_h_3` (horizontal only)
+`mspace_v_1` `mspace_v_2` `mspace_v_3` (vertical only)
+
+### Dimensions
+`corner_radius` `beveling` `tab_height` `splitter_size` `container_corner_radius` `dock_border_size`
+
+### Colors (key ones)
+`color_bg_app` `color_fg_app` `color_bg_container` `color_bg_even` `color_bg_odd`
+`color_text` `color_text_hl` `color_text_disabled`
+`color_label_inner` `color_label_outer` (+ `_hover` `_down` `_focus` `_active` `_disabled`)
+`color_inset` (+ variants) `color_outset` (+ variants)
+`color_bevel` (+ variants)
+`color_shadow` `color_highlight` `color_makepad` (#FF5C39)
+`color_white` `color_black`
+`color_error` `color_warning` `color_panic`
+`color_selection_focus` `color_cursor`
+`color_u_1`..`color_u_6` (light scale) `color_d_1`..`color_d_5` (dark scale)
+`color_u_hidden` `color_d_hidden` (transparent)
+`color_drag_target_preview`
+`color_val` `color_handle` (+ `_hover` `_focus` `_drag` `_disabled`) — slider colors
+`color_mark_off` `color_mark_active` (+ variants) — check/radio marks
+`color_app_caption_bar`
+
+### Typography
+`font_size_1`..`font_size_4` `font_size_p` `font_size_code` `font_size_base`
+`font_regular` `font_bold` `font_italic` `font_bold_italic` `font_code` `font_icons`
+`font_wdgt_line_spacing` `font_longform_line_spacing`
+
+## Enums Reference
+
+### MouseCursor
+`Default` `Hand` `Arrow` `Text` `Move` `Wait` `Help` `NotAllowed` `Crosshair` `Grab` `Grabbing` `NResize` `EResize` `SResize` `WResize` `NsResize` `EwResize` `ColResize` `RowResize` `Hidden`
+Usage: `cursor: MouseCursor.Hand`
+
+### ImageFit
+`Stretch` `Horizontal` `Vertical` `Smallest` `Biggest` `Size`
+
+### SplitterAxis
+`Horizontal` `Vertical`
+
+### SplitterAlign
+`FromA(250.0)` `FromB(200.0)` `Weighted(0.5)`
+
+### SlideSide
+`Left` `Right` `Top`
+
+### DragAxis (for Slider)
+`Horizontal` `Vertical`
+
+### ImageAnimation
+`Stop` `Once` `Loop` `Bounce` `Frame(0.0)` `Factor(0.0)` `OnceFps(60.0)` `LoopFps(60.0)` `BounceFps(60.0)`
+
+## Common Patterns
+
+**REMINDER: Every container below uses `height: Fit` — you must too!**
+
+### Colored card
+```
+RoundedView{
+    width: Fill height: Fit
+    padding: 15 flow: Down spacing: 8
+    draw_bg.color: #445
+    draw_bg.border_radius: 8.0
+    Label{text: "Card Title" draw_text.color: #fff}
+}
+```
+
+### Sidebar + content
+```
+View{
+    width: Fill height: Fill
+    flow: Right
+    SolidView{
+        width: 250 height: Fill
+        draw_bg.color: #222
+        flow: Down padding: 10
+    }
+    View{
+        width: Fill height: Fill
+        flow: Down padding: 15
+    }
+}
+```
+
+### Sidebar + content using Splitter
+```
+Splitter{
+    axis: SplitterAxis.Horizontal
+    align: SplitterAlign.FromA(250.0)
+    a := sidebar
+    b := main
+}
+sidebar := View{ width: Fill height: Fill flow: Down padding: 10 }
+main := View{ width: Fill height: Fill flow: Down padding: 15 }
+```
+
+### Overlay (modal/tooltip pattern)
+```
+View{ height: Fit
+    flow: Overlay
+    View{ height: Fit width: Fill ... }   // base content
+    View{ height: Fit align: Center ... } // overlay on top
+}
+```
+
+### Scrollable list
+```
+ScrollYView{
+    width: Fill height: Fill
+    flow: Down padding: 10 spacing: 8
+    Label{text: "Item 1"}
+    Label{text: "Item 2"}
+}
+```
+
+### Custom shader widget
+Note: `View{ show_bg: true }` is OK here because we provide a complete custom `pixel` shader that overrides the ugly default.
+```
+View{
+    width: 200 height: 200
+    show_bg: true
+    draw_bg +: {
+        pixel: fn(){
+            let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+            sdf.circle(
+                self.rect_size.x * 0.5
+                self.rect_size.y * 0.5
+                min(self.rect_size.x self.rect_size.y) * 0.4
+            )
+            sdf.fill(#f80)
+            return sdf.result  // already premultiplied by sdf.fill(), no Pal.premul() needed
+        }
+    }
+}
+```
+
+### Hoverable list item
+Label does NOT support animator. Wrap it in a View to get hover effects. Use `label :=` to declare the inner Label so each instance can override its text via `label.text:`:
+```
+let HoverItem = View{
+    width: Fill height: Fit
+    padding: 8
+    cursor: MouseCursor.Hand
+    new_batch: true
+    show_bg: true
+    draw_bg +: {
+        color: uniform(#0000)
+        color_hover: uniform(#fff2)
+        hover: instance(0.0)
+        pixel: fn(){
+            return self.color.mix(self.color_hover, self.hover)
+        }
+    }
+    animator: Animator{
+        hover: {
+            default: @off
+            off: AnimatorState{
+                from: {all: Forward {duration: 0.15}}
+                apply: {draw_bg: {hover: 0.0}}
+            }
+            on: AnimatorState{
+                from: {all: Forward {duration: 0.15}}
+                apply: {draw_bg: {hover: 1.0}}
+            }
+        }
+    }
+    label := Label{text: "item" draw_text.color: #fff}
+}
+
+RoundedView{
+    width: 300 height: Fit
+    padding: 10 flow: Down spacing: 4
+    new_batch: true
+    draw_bg.color: #222
+    draw_bg.border_radius: 5.0
+    Label{text: "Todo Items" draw_text.color: #fff}
+    HoverItem{label.text: "Walk the dog"}
+    HoverItem{label.text: "Do laundry"}
+    HoverItem{label.text: "Buy groceries"}
+}
+```
+
+### Toolbar pattern
+```
+RectShadowView{
+    width: Fill height: 38.
+    flow: Down padding: theme.mspace_2
+    draw_bg +: {
+        shadow_color: theme.color_shadow
+        shadow_radius: 7.5
+        color: theme.color_fg_app
+    }
+    content := View{
+        height: Fit width: Fill
+        flow: Right spacing: theme.space_2
+        align: Align{x: 0. y: 0.5}
+        ButtonFlatter{text: "File"}
+        ButtonFlatter{text: "Edit"}
+        Filler{}
+        ButtonFlat{text: "Run"}
+    }
+}
+```
+
+## HTTP Requests (`net.http_request`)
+
+Make async HTTP requests from script. Responses arrive via callbacks.
+
+### GET request
+```
+let req = net.HttpRequest{
+    url: "https://html.duckduckgo.com/html/?q=rust+programming"
+    method: net.HttpMethod.GET
+    headers: {"User-Agent": "MakepadApp/1.0"}
+}
+net.http_request(req) do net.HttpEvents{
+    on_response: |res| {
+        let text = res.body.to_string()       // body as string
+        let json = res.body.parse_json()      // or parse as JSON
+        // res.status_code                    // HTTP status (200, 404, etc.)
+    }
+    on_error: |e| {
+        // e.message                          // error description
+    }
+}
+```
+
+### POST request with JSON body
+```
+let req = net.HttpRequest{
+    url: "https://api.example.com/data"
+    method: net.HttpMethod.POST
+    headers: {"Content-Type": "application/json"}
+    body: {key: "value" count: 42}.to_json()
+}
+net.http_request(req) do net.HttpEvents{
+    on_response: |res| { /* ... */ }
+    on_error: |e| { /* ... */ }
+}
+```
+
+### Streaming response
+```
+let req = net.HttpRequest{
+    url: "https://api.example.com/stream"
+    method: net.HttpMethod.POST
+    is_streaming: true
+    body: {stream: true}.to_json()
+}
+var total = ""
+net.http_request(req) do net.HttpEvents{
+    on_stream: |res| {
+        total += res.body.to_string()         // called per chunk
+    }
+    on_complete: |res| {
+        // stream finished, total has all data
+    }
+    on_error: |e| { /* ... */ }
+}
+```
+
+### HttpMethod values
+`net.HttpMethod.GET`, `POST`, `PUT`, `DELETE`, `HEAD`, `PATCH`, `OPTIONS`
+
+### Cookie-free search endpoints
+DuckDuckGo provides HTML endpoints that return static HTML — no cookies, no JS, no API key:
+- `https://html.duckduckgo.com/html/?q=QUERY` — div-based, CSS classes for results
+- `https://lite.duckduckgo.com/lite/?q=QUERY` — table-based, ~10kB compressed
+
+Both require a `User-Agent` header. Results can be parsed with `parse_html()`.
+
+---
+
+## HTML Parsing (`parse_html`)
+
+Parse an HTML string and query it with CSS-like selectors. Call `.parse_html()` on any string.
+
+### Basic usage
+```
+let html = "<div class='box' id='main'><p>Hello</p><p class='bold'>World</p></div>"
+let doc = html.parse_html()
+```
+
+### Querying elements
+```
+doc.query("p")                // all <p> elements (returns html handle)
+doc.query("p[0]")             // first <p> element
+doc.query("#main")            // element with id "main"
+doc.query("p.bold")           // <p> with class "bold"
+doc.query("div > p")          // direct children
+doc.query("div p")            // descendants
+doc.query("div > *")          // all direct children (wildcard)
+doc.query("div").query("p")   // chained queries
+```
+
+### Extracting data
+```
+doc.query("p[0]").text         // text content: "Hello"
+doc.query("div@class")        // attribute value: "box"
+doc.query("div@id")           // attribute value: "main"
+doc.query("p.text")           // array of text from all <p>: ["Hello", "World"]
+doc.query("p@class")          // array of class attrs from all <p>
+```
+
+### Properties on html handles
+```
+handle.length                  // number of matched elements
+handle.text                    // text content (concatenated)
+handle.html                    // reconstructed HTML string
+handle.attr("name")            // attribute value (string or nil)
+handle.array()                 // convert to array of element handles
+```
+
+### Iterating results
+```
+let items = doc.query("a.result__a").array()
+for item, i in items {
+    let title = item.text
+    let href = item.attr("href")
+    // ... use title and href
+}
+```
+
+### Full example: search DuckDuckGo and parse results
+```
+fn do_search(query) {
+    let req = net.HttpRequest{
+        url: "https://html.duckduckgo.com/html/?q=" + query
+        method: net.HttpMethod.GET
+        headers: {"User-Agent": "MakepadApp/1.0"}
+    }
+    net.http_request(req) do net.HttpEvents{
+        on_response: |res| {
+            let doc = res.body.to_string().parse_html()
+            let links = doc.query("a.result__a").array()
+            let snippets = doc.query("a.result__snippet").array()
+            for link, i in links {
+                let title = link.text
+                let url = link.attr("href")
+                let snippet = if i < snippets.len() snippets[i].text else ""
+                // ... build result list
+            }
+        }
+        on_error: |e| { /* handle error */ }
+    }
+}
+```
+
+---
+
+## Notes
+
+- **⛔ Default text color is WHITE.** For light/white themes, set `draw_text.color` to a dark color (e.g. `#222`, `#333`) on ALL text elements. Otherwise text is invisible (white-on-white).
+- **⛔ Set `new_batch: true` on ANY View with `show_bg: true` that contains text.** Makepad batches same-shader widgets into one draw call. Without `new_batch: true`, text renders behind backgrounds (invisible text). This is especially critical for **hoverable items** — text vanishes on hover when the background becomes opaque. Set it on BOTH the item template AND the parent container.
+- **⚠️ ALWAYS set `height: Fit` on containers!** The default is `height: Fill` which causes 0-height (invisible UI) in this context.
+- **⛔ Named children in `let` templates MUST use `:=`:** `label := Label{...}`, `tag := Label{...}`, `check := CheckBox{...}`. Override with `Item{label.text: "x"}`. Without `:=`, text is invisible.
+- **⛔ Named children inside anonymous Views are UNREACHABLE.** If `label :=` is inside an unnamed `View{}`, `Item{label.text: "x"}` fails silently. Give the View a name: `texts := View{ label := Label{...} }` then override with `Item{texts.label.text: "x"}`.
+- **🚫 DO NOT invent properties or syntax.** Only use what's documented in this manual. No guessing.
+- No commas between sibling properties (space or newline separated)
+- **Use commas when values contain negative numbers or could be parsed as expressions**: `vec4(-1.0, -1.0, -1.0, -1.0)` NOT `vec4(-1.0 -1.0 -1.0 -1.0)` (the parser would see `-1.0 -1.0` as subtraction). Safe rule: always use commas inside `vec2()`, `vec4()`, and array literals when any value is negative or an expression
+- `+:` merges with parent; without it, replaces entirely
+- `:=` declares named/dynamic/template children (e.g. `label := Label{...}`)
+- Bare numbers for Size become `Fixed(n)`: `width: 200` = `width: Size.Fixed(200)`
+- Resources: `crate_resource("self://relative/path")`
+- Function args in shaders: space-separated, no commas: `sdf.box(0. 0. 100. 100. 5.0)`
+- `if` in shaders: `if condition { ... } else { ... }` (no parens around condition)
+- `for` in shaders: `for i in 0..4 { ... }`
+- `match` in shaders: `match self.block_type { Type.A => { ... } Type.B => { ... } }`
+- Inherit + override: `theme.mspace_1{left: theme.space_2}` — takes mspace_1 but overrides left
+- Strings use double quotes only: `text: "Hello"`. No single quotes, no backticks.
+
+## Guidelines
+
+- Use runsplash blocks for anything visual: UI mockups, styled cards, layouts, color palettes, shader demos, button groups, form layouts, etc.
+- You can have multiple runsplash blocks in a single response, mixed with normal markdown text.
+- Keep splash blocks focused — one concept per block when possible.
+- Use `let` bindings at the top of a block to define reusable styled components, then instantiate them below.
+- Use theme variables (theme.color_bg_app, theme.space_2, etc.) for consistent styling.
+- For simple text answers, just use normal markdown without runsplash blocks.
+
+## Vector Widget (SVG-like Drawing)
+
+The `Vector{}` widget renders SVG-like vector graphics declaratively in Splash. It supports paths, shapes, gradients, filters, groups, transforms, and animations — all without loading external SVG files.
+
+### Basic Usage
+
+```
+Vector{width: 200 height: 200 viewbox: vec4(0 0 200 200)
+    Rect{x: 10 y: 10 w: 80 h: 60 rx: 5 ry: 5 fill: #f80}
+    Circle{cx: 150 cy: 50 r: 30 fill: #08f}
+    Line{x1: 10 y1: 150 x2: 190 y2: 150 stroke: #fff stroke_width: 2}
+}
+```
+
+The `viewbox` property defines the coordinate space as `vec4(x y width height)`. The widget sizes itself to fit the viewbox when `width: Fit` and `height: Fit` (the defaults), or you can set explicit pixel dimensions.
+
+### Shape Types
+
+All shapes support these common style properties:
+
+| Property | Type | Default | Notes |
+|----------|------|---------|-------|
+| `fill` | color, Gradient, RadGradient, Tween, or `false` | inherited | `false` = no fill |
+| `fill_opacity` | f32 | 1.0 | multiplied with fill alpha |
+| `stroke` | color, Gradient, or Tween | none | outline color |
+| `stroke_width` | f32 or Tween | 0.0 | outline thickness |
+| `stroke_opacity` | f32 or Tween | 1.0 | outline alpha |
+| `opacity` | f32 or Tween | 1.0 | overall shape opacity |
+| `stroke_linecap` | string | "butt" | "butt", "round", "square" |
+| `stroke_linejoin` | string | "miter" | "miter", "round", "bevel" |
+| `transform` | Transform or array | identity | see Transforms section |
+| `filter` | Filter ref | none | see Filters section |
+| `shader_id` | f32 | 0.0 | for custom GPU effects on Svg widget |
+
+#### Path — SVG path data
+```
+Path{d: "M 10 10 L 100 100 C 50 50 200 200 300 300 Z" fill: #f00 stroke: #000 stroke_width: 2}
+```
+The `d` property accepts standard SVG path data strings (M, L, C, Q, A, Z, etc.).
+
+#### Rect — Rectangle
+```
+Rect{x: 10 y: 20 w: 100 h: 50 rx: 5 ry: 5 fill: #f80 stroke: #fff stroke_width: 1}
+```
+
+#### Circle
+```
+Circle{cx: 50 cy: 50 r: 40 fill: #08f}
+```
+
+#### Ellipse
+```
+Ellipse{cx: 100 cy: 50 rx: 80 ry: 40 fill: #0f8}
+```
+
+#### Line
+```
+Line{x1: 10 y1: 10 x2: 190 y2: 190 stroke: #fff stroke_width: 2 stroke_linecap: "round"}
+```
+
+#### Polyline — open connected segments
+```
+Polyline{pts: [10 10 50 80 100 20 150 90] fill: false stroke: #ff0 stroke_width: 2}
+```
+
+#### Polygon — closed connected segments
+```
+Polygon{pts: [100 10 40 198 190 78 10 78 160 198] fill: #f0f stroke: #fff stroke_width: 1}
+```
+
+### Groups
+
+`Group{}` composes shapes and applies shared styles/transforms to all children:
+
+```
+Vector{width: 200 height: 200 viewbox: vec4(0 0 200 200)
+    Group{opacity: 0.7 transform: Rotate{deg: 15}
+        Rect{x: 20 y: 20 w: 60 h: 60 fill: #f00}
+        Circle{cx: 130 cy: 50 r: 30 fill: #0f0}
+    }
+}
+```
+
+Groups can be nested. Style properties on a Group (fill, stroke, etc.) apply to its children.
+
+### Gradients
+
+Define gradients as `let` bindings and reference them in `fill` or `stroke`:
+
+#### Linear Gradient
+```
+let my_grad = Gradient{x1: 0 y1: 0 x2: 1 y2: 1
+    Stop{offset: 0 color: #ff0000}
+    Stop{offset: 0.5 color: #00ff00}
+    Stop{offset: 1 color: #0000ff}
+}
+
+Vector{width: 200 height: 100 viewbox: vec4(0 0 200 100)
+    Rect{x: 0 y: 0 w: 200 h: 100 fill: my_grad}
+}
+```
+
+Gradient coordinates (`x1`, `y1`, `x2`, `y2`) are in the range 0–1 (object bounding box). `Stop` children define color stops with `offset` (0–1), `color`, and optional `opacity`.
+
+#### Radial Gradient
+```
+let radial = RadGradient{cx: 0.5 cy: 0.5 r: 0.5
+    Stop{offset: 0 color: #fff}
+    Stop{offset: 1 color: #000}
+}
+
+Vector{width: 200 height: 200 viewbox: vec4(0 0 200 200)
+    Circle{cx: 100 cy: 100 r: 90 fill: radial}
+}
+```
+
+RadGradient properties: `cx`, `cy` (center, default 0.5), `r` (radius, default 0.5), `fx`, `fy` (focal point, defaults to center).
+
+#### Gradient stops with opacity
+```
+let glass = Gradient{x1: 0 y1: 0 x2: 1 y2: 1
+    Stop{offset: 0 color: #xffffff opacity: 0.35}
+    Stop{offset: 0.4 color: #xffffff opacity: 0.08}
+    Stop{offset: 1 color: #xffffff opacity: 0.2}
+}
+```
+
+### Filters
+
+Define a `Filter` with `DropShadow` effects:
+
+```
+let shadow = Filter{
+    DropShadow{dx: 2 dy: 4 blur: 6 color: #000000 opacity: 0.5}
+}
+
+Vector{width: 200 height: 200 viewbox: vec4(0 0 200 200)
+    Rect{x: 40 y: 40 w: 120 h: 120 rx: 10 ry: 10 fill: #445 filter: shadow}
+}
+```
+
+DropShadow properties: `dx` (x offset), `dy` (y offset), `blur` (blur radius), `color`, `opacity`.
+
+### Transforms
+
+Transforms can be applied to any shape or group via the `transform` property. Use a single transform or an array of transforms (composed left-to-right):
+
+#### Static transforms
+```
+// Single transform
+Rect{x: 0 y: 0 w: 50 h: 50 fill: #f00 transform: Rotate{deg: 45}}
+
+// Multiple transforms (composed left-to-right)
+Group{transform: [Translate{x: 100 y: 50} Scale{x: 2 y: 2} Rotate{deg: 30}]
+    Circle{cx: 0 cy: 0 r: 20 fill: #0ff}
+}
+```
+
+Available transforms:
+- `Rotate{deg: 45}` — rotation in degrees. Optional `cx`, `cy` for rotation center
+- `Scale{x: 2 y: 1.5}` — scale factors. If only `x` is given, `y` defaults to the same value
+- `Translate{x: 100 y: 50}` — translation offset
+- `SkewX{deg: 30}` — horizontal skew
+- `SkewY{deg: 15}` — vertical skew
+
+#### Animated transforms
+Add `dur`, `from`, `to` (or `values`), and optionally `loop_` and `begin` to animate:
+
+```
+// Continuously rotating shape
+Circle{cx: 100 cy: 100 r: 30 fill: #0ff
+    transform: Rotate{deg: 0 dur: 2.0 from: 0 to: 360 loop_: true}
+}
+
+// Animated scale
+Rect{x: 50 y: 50 w: 40 h: 40 fill: #f80
+    transform: Scale{x: 1 dur: 1.5 from: 1 to: 2 loop_: true}
+}
+```
+
+### Tween (Property Animation)
+
+Use `Tween{}` to animate individual shape properties (fill, stroke, d, x, y, r, etc.):
+
+```
+// Animated path morphing
+Path{d: Tween{
+    dur: 2.0 loop_: true
+    values: ["M 10 80 Q 50 10 100 80" "M 10 80 Q 50 150 100 80"]
+} fill: #f0f}
+
+// Animated fill color
+Circle{cx: 50 cy: 50 r: 30
+    fill: Tween{dur: 1.5 loop_: true from: #ff0000 to: #0000ff}
+}
+
+// Animated stroke width
+Rect{x: 10 y: 10 w: 80 h: 80
+    fill: false stroke: #fff
+    stroke_width: Tween{dur: 2.0 loop_: true from: 1 to: 5}
+}
+```
+
+Tween properties:
+- `from`, `to` — start and end values
+- `values` — array of keyframe values (alternative to from/to)
+- `dur` — duration in seconds
+- `begin` — start delay in seconds
+- `loop_` — `true` for indefinite, or a number for repeat count
+- `calc` — "linear" (default), "discrete", "paced", "spline"
+- `fill_mode` — "remove" (default) or "freeze"
+
+### Complete Example: App Icon with Gradients, Groups, and Filters
+
+This example from the splash demo recreates the Makepad app icon using Vector:
+
+```
+// Define gradients
+let glass_bg = Gradient{x1: 0 y1: 0 x2: 1 y2: 1
+    Stop{offset: 0 color: #x556677 opacity: 0.45}
+    Stop{offset: 1 color: #x334455 opacity: 0.35}
+}
+let brain_grad = Gradient{x1: 0.5 y1: 0 x2: 0.5 y2: 1
+    Stop{offset: 0 color: #x77ccff}
+    Stop{offset: 0.4 color: #x7799ee}
+    Stop{offset: 0.75 color: #x8866dd}
+    Stop{offset: 1 color: #x9944cc}
+}
+let brain_glow = RadGradient{cx: 0.5 cy: 0.45 r: 0.45
+    Stop{offset: 0 color: #x4466ee opacity: 0.4}
+    Stop{offset: 1 color: #x4466dd opacity: 0.0}
+}
+
+// Define filter
+let icon_shadow = Filter{
+    DropShadow{dx: 0 dy: 4 blur: 6 color: #x000000 opacity: 0.5}
+}
+
+Vector{width: 256 height: 256 viewbox: vec4(0 0 256 256)
+    // Glass background with shadow
+    Rect{x: 16 y: 16 w: 224 h: 224 rx: 44 ry: 44
+        fill: glass_bg filter: icon_shadow}
+
+    // Brain glow
+    Circle{cx: 128 cy: 95 r: 80 fill: brain_glow}
+
+    // Brain paths (scaled and translated group)
+    Group{transform: [Translate{x: 36.8 y: 11.4} Scale{x: 7.6 y: 7.6}]
+        Path{d: "M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
+            fill: false stroke: brain_grad stroke_width: 0.35
+            stroke_linecap: "round" stroke_linejoin: "round"}
+        Path{d: "M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
+            fill: false stroke: brain_grad stroke_width: 0.35
+            stroke_linecap: "round" stroke_linejoin: "round"}
+    }
+
+    // Keyboard keys
+    Rect{x: 73 y: 190 w: 9 h: 6 rx: 1 ry: 1 fill: #xffffff fill_opacity: 0.18}
+    Rect{x: 85 y: 190 w: 9 h: 6 rx: 1 ry: 1 fill: #xffffff fill_opacity: 0.18}
+}
+```
+
+### SVG Icons in Vector
+
+Simple SVG icons can be embedded directly as `Path` shapes:
+
+```
+// File icon (from icon_file.svg)
+Vector{width: 32 height: 32 viewbox: vec4(0 0 49 49)
+    Path{d: "M12.069,11.678c0,-2.23 1.813,-4.043 4.043,-4.043l10.107,0l0,8.086c0,1.118 0.903,2.021 2.021,2.021l8.086,0l0,18.193c0,2.23 -1.813,4.043 -4.043,4.043l-16.171,0c-2.23,0 -4.043,-1.813 -4.043,-4.043l0,-24.257Zm24.257,4.043l-8.086,0l0,-8.086l8.086,8.086Z"}
+}
+
+// Folder icon
+Vector{width: 32 height: 32 viewbox: vec4(0 0 49 49)
+    Path{d: "M11.884,37.957l24.257,0c2.23,0 4.043,-1.813 4.043,-4.043l0,-16.172c0,-2.23 -1.813,-4.042 -4.043,-4.042l-10.107,0c-0.638,0 -1.238,-0.297 -1.617,-0.809l-1.213,-1.617c-0.765,-1.017 -1.965,-1.617 -3.235,-1.617l-8.085,0c-2.23,0 -4.043,1.813 -4.043,4.043l0,20.214c0,2.23 1.813,4.043 4.043,4.043Z"}
+}
+```
+
+### Vector vs Svg Widget
+
+| | `Vector{}` | `Svg{}` |
+|---|---|---|
+| **Input** | Declarative shapes in Splash script | External `.svg` file via resource handle |
+| **Use case** | Programmatic/inline vector graphics | Loading pre-made SVG assets |
+| **Gradients** | `let` bindings, referenced by name | Parsed from SVG `<defs>` |
+| **Animation** | `Tween{}` on properties, animated transforms | Parsed from SVG `<animate>` elements |
+| **Custom shaders** | `shader_id` + custom `get_color` on Svg | Same mechanism via `draw_svg +:` |
+| **Syntax** | `Vector{viewbox: ... Path{} Rect{}}` | `Svg{draw_svg +: {svg: crate_resource("self://file.svg")}}` |
+
+Use `Vector{}` when you want to define graphics inline in your UI script. Use `Svg{}` when loading existing SVG files as assets.
+
+### Hex Color Escaping Reminder
+
+When using hex colors containing the letter `e` inside `script_mod!`, use the `#x` prefix to avoid parse errors:
+```
+// These need #x prefix (contain 'e' adjacent to digits)
+fill: #x2ecc71
+fill: #x1e1e2e
+fill: #x4466ee
+
+// These are fine without #x (no 'e' issue)
+fill: #ff4444
+fill: #00ff00
+```
+
+## MathView Widget (LaTeX Math Rendering)
+
+The `MathView{}` widget renders LaTeX mathematical equations using vector glyph rendering with the NewCMMath font.
+
+### Basic Usage
+
+```
+MathView{text: "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}" font_size: 14.0}
+```
+
+### Properties
+
+| Property | Type | Default | Notes |
+|----------|------|---------|-------|
+| `text` | string | "" | LaTeX math expression |
+| `font_size` | f64 | 11.0 | Font size in points |
+| `color` | vec4 | #fff | Color of rendered math |
+| `width` | Size | Fit | Widget width |
+| `height` | Size | Fit | Widget height |
+
+### Examples
+
+```
+// Inline in a layout
+View{flow: Down height: Fit spacing: 12 padding: 15
+
+    Label{text: "Quadratic Formula" draw_text.color: #aaa draw_text.text_style.font_size: 10}
+    MathView{text: "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}" font_size: 14.0}
+
+    Label{text: "Euler's Identity" draw_text.color: #aaa draw_text.text_style.font_size: 10}
+    MathView{text: "e^{i\\pi} + 1 = 0" font_size: 16.0}
+
+    Label{text: "Integral" draw_text.color: #aaa draw_text.text_style.font_size: 10}
+    MathView{text: "\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}" font_size: 14.0}
+
+    Label{text: "Matrix" draw_text.color: #aaa draw_text.text_style.font_size: 10}
+    MathView{text: "\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}" font_size: 14.0}
+
+    Label{text: "Sum" draw_text.color: #aaa draw_text.text_style.font_size: 10}
+    MathView{text: "\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}" font_size: 14.0}
+
+    Label{text: "Maxwell's Equations" draw_text.color: #aaa draw_text.text_style.font_size: 10}
+    MathView{text: "\\nabla \\times \\mathbf{E} = -\\frac{\\partial \\mathbf{B}}{\\partial t}" font_size: 14.0}
+}
+```
+
+### Different Sizes
+
+```
+View{width: Fill height: Fit flow: Right spacing: 15 align: Align{y: 0.5}}
+MathView{text: "\\alpha + \\beta" font_size: 8.0}
+MathView{text: "\\alpha + \\beta" font_size: 12.0}
+MathView{text: "\\alpha + \\beta" font_size: 18.0}
+MathView{text: "\\alpha + \\beta" font_size: 24.0}
+```
+
+### Supported LaTeX
+
+**Fractions & Roots:**
+`\frac{a}{b}`, `\dfrac{a}{b}`, `\tfrac{a}{b}`, `\sqrt{x}`, `\sqrt[n]{x}`
+
+**Subscripts & Superscripts:**
+`x_i`, `x^2`, `x_i^2`, `a_{n+1}`
+
+**Greek Letters (lowercase):**
+`\alpha`, `\beta`, `\gamma`, `\delta`, `\epsilon`, `\zeta`, `\eta`, `\theta`, `\lambda`, `\mu`, `\nu`, `\xi`, `\pi`, `\rho`, `\sigma`, `\tau`, `\phi`, `\chi`, `\psi`, `\omega`
+
+**Greek Letters (uppercase):**
+`\Gamma`, `\Delta`, `\Theta`, `\Lambda`, `\Xi`, `\Pi`, `\Sigma`, `\Phi`, `\Psi`, `\Omega`
+
+**Big Operators:**
+`\sum`, `\prod`, `\int`, `\iint`, `\iiint`, `\oint`, `\bigcup`, `\bigcap`, `\bigoplus`, `\bigotimes`
+
+**Relations:**
+`=`, `\neq`, `<`, `>`, `\leq`, `\geq`, `\sim`, `\approx`, `\equiv`, `\subset`, `\supset`, `\in`, `\notin`
+
+**Arrows:**
+`\leftarrow`, `\rightarrow`, `\leftrightarrow`, `\Leftarrow`, `\Rightarrow`, `\Leftrightarrow`, `\mapsto`
+
+**Accents:**
+`\hat{x}`, `\bar{x}`, `\tilde{x}`, `\vec{x}`, `\dot{x}`, `\ddot{x}`, `\overline{x}`, `\underline{x}`
+
+**Delimiters (auto-sizing with \left...\right):**
+`\left( \right)`, `\left[ \right]`, `\left\{ \right\}`, `\left| \right|`, `\langle \rangle`, `\lfloor \rfloor`, `\lceil \rceil`
+
+**Matrices:**
+```
+\begin{pmatrix} a & b \\ c & d \end{pmatrix}   % parentheses
+\begin{bmatrix} a & b \\ c & d \end{bmatrix}   % brackets
+\begin{vmatrix} a & b \\ c & d \end{vmatrix}   % determinant bars
+\begin{cases} a & \text{if } x > 0 \\ b & \text{otherwise} \end{cases}
+```
+
+**Styles:**
+`\mathbf{x}` (bold), `\mathit{x}` (italic), `\mathrm{x}` (roman), `\mathcal{x}` (calligraphic), `\mathbb{R}` (blackboard bold), `\mathfrak{g}` (fraktur)
+
+**Spacing:**
+`\,` (thin), `\:` (medium), `\;` (thick), `\!` (negative thin), `\quad`, `\qquad`
+
+**Text & Operators:**
+`\text{...}`, `\sin`, `\cos`, `\tan`, `\log`, `\ln`, `\exp`, `\lim`, `\min`, `\max`, `\det`
+
+**Dots:**
+`\ldots`, `\cdots`, `\vdots`, `\ddots`
+
+**Misc Symbols:**
+`\infty`, `\partial`, `\nabla`, `\forall`, `\exists`, `\emptyset`, `\pm`, `\mp`, `\times`, `\div`, `\cdot`
+
+### Notes
+
+- MathView is read-only — no selection or editing
+- Uses Display math style (large operators centered)
+- Backslashes must be escaped as `\\` in Splash strings
+- The widget sizes itself to fit the rendered equation by default (`width: Fit`, `height: Fit`)
+- An empty `text` produces no output
+
diff --git a/resources/icons/search.svg b/resources/icons/search.svg
index 52f7f3ff4..a685692b8 100644
--- a/resources/icons/search.svg
+++ b/resources/icons/search.svg
@@ -1,5 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1;">
-    <path d="M18.74,16.815C19.074,17.186 19.074,17.742 18.703,18.076L17.664,19.115C17.33,19.486 16.773,19.486 16.402,19.115L12.729,15.441C12.543,15.256 12.469,15.033 12.469,14.81L12.469,14.18C11.133,15.219 9.5,15.813 7.719,15.813C3.451,15.813 0,12.361 0,8.094C0,3.863 3.451,0.375 7.719,0.375C11.949,0.375 15.438,3.863 15.438,8.094C15.438,9.912 14.807,11.545 13.805,12.844L14.398,12.844C14.621,12.844 14.844,12.955 15.029,13.104L18.74,16.815ZM7.719,12.844C10.316,12.844 12.469,10.729 12.469,8.094C12.469,5.496 10.316,3.344 7.719,3.344C5.084,3.344 2.969,5.496 2.969,8.094C2.969,10.729 5.084,12.844 7.719,12.844Z" style="fill-rule:nonzero; stroke-width: 0.5;"/>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 2a8 8 0 0 1 6.247 13l4.283 4.283a1 1 0 1 1-1.414 1.414l-4.283-4.283A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12a6 6 0 0 0 0-12z"/>
 </svg>
diff --git a/resources/icons/settings.svg b/resources/icons/settings.svg
index 302f3e489..f047ec0cd 100644
--- a/resources/icons/settings.svg
+++ b/resources/icons/settings.svg
@@ -1,12 +1,3 @@
-<svg height="200px" width="200px" version="1.1" id="_x32_"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">
-    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-    <g id="SVGRepo_iconCarrier">
-        <style type="text/css"> .st0{fill:#000000;} </style>
-        <g>
-            <path class="st0" d="M502.325,307.303l-39.006-30.805c-6.215-4.908-9.665-12.429-9.668-20.348c0-0.084,0-0.168,0-0.252 c-0.014-7.936,3.44-15.478,9.667-20.396l39.007-30.806c8.933-7.055,12.093-19.185,7.737-29.701l-17.134-41.366 c-4.356-10.516-15.167-16.86-26.472-15.532l-49.366,5.8c-7.881,0.926-15.656-1.966-21.258-7.586 c-0.059-0.06-0.118-0.119-0.177-0.178c-5.597-5.602-8.476-13.36-7.552-21.225l5.799-49.363 c1.328-11.305-5.015-22.116-15.531-26.472L337.004,1.939c-10.516-4.356-22.646-1.196-29.701,7.736l-30.805,39.005 c-4.908,6.215-12.43,9.665-20.349,9.668c-0.084,0-0.168,0-0.252,0c-7.935,0.014-15.477-3.44-20.395-9.667L204.697,9.675 c-7.055-8.933-19.185-12.092-29.702-7.736L133.63,19.072c-10.516,4.356-16.86,15.167-15.532,26.473l5.799,49.366 c0.926,7.881-1.964,15.656-7.585,21.257c-0.059,0.059-0.118,0.118-0.178,0.178c-5.602,5.598-13.36,8.477-21.226,7.552 l-49.363-5.799c-11.305-1.328-22.116,5.015-26.472,15.531L1.939,174.996c-4.356,10.516-1.196,22.646,7.736,29.701l39.006,30.805 c6.215,4.908,9.665,12.429,9.668,20.348c0,0.084,0,0.167,0,0.251c0.014,7.935-3.44,15.477-9.667,20.395L9.675,307.303 c-8.933,7.055-12.092,19.185-7.736,29.701l17.134,41.365c4.356,10.516,15.168,16.86,26.472,15.532l49.366-5.799 c7.882-0.926,15.656,1.965,21.258,7.586c0.059,0.059,0.118,0.119,0.178,0.178c5.597,5.603,8.476,13.36,7.552,21.226l-5.799,49.364 c-1.328,11.305,5.015,22.116,15.532,26.472l41.366,17.134c10.516,4.356,22.646,1.196,29.701-7.736l30.804-39.005 c4.908-6.215,12.43-9.665,20.348-9.669c0.084,0,0.168,0,0.251,0c7.936-0.014,15.478,3.44,20.396,9.667l30.806,39.007 c7.055,8.933,19.185,12.093,29.701,7.736l41.366-17.134c10.516-4.356,16.86-15.168,15.532-26.472l-5.8-49.366 c-0.926-7.881,1.965-15.656,7.586-21.257c0.059-0.059,0.119-0.119,0.178-0.178c5.602-5.597,13.36-8.476,21.225-7.552l49.364,5.799 c11.305,1.328,22.117-5.015,26.472-15.531l17.134-41.365C514.418,326.488,511.258,314.358,502.325,307.303z M281.292,329.698 c-39.68,16.436-85.172-2.407-101.607-42.087c-16.436-39.68,2.407-85.171,42.087-101.608c39.68-16.436,85.172,2.407,101.608,42.088 C339.815,267.771,320.972,313.262,281.292,329.698z"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 8.25a3.75 3.75 0 1 0 0 7.5a3.75 3.75 0 0 0 0-7.5zm9 3.75c0-.467-.05-.923-.145-1.364l2.06-1.606a1 1 0 0 0 .224-1.361l-1.78-3.082a1 1 0 0 0-1.278-.44l-2.43.976a9.978 9.978 0 0 0-2.362-1.364L14.92 1.17A1 1 0 0 0 13.93.25h-3.86a1 1 0 0 0-.99.92l-.369 2.588a9.978 9.978 0 0 0-2.362 1.364l-2.43-.976a1 1 0 0 0-1.278.44L.861 7.668a1 1 0 0 0 .224 1.361l2.06 1.607a10.07 10.07 0 0 0 0 2.728l-2.06 1.607a1 1 0 0 0-.224 1.361l1.78 3.082a1 1 0 0 0 1.278.44l2.43-.976a9.978 9.978 0 0 0 2.362 1.364l.369 2.588a1 1 0 0 0 .99.92h3.86a1 1 0 0 0 .99-.92l.369-2.588a9.978 9.978 0 0 0 2.362-1.364l2.43.976a1 1 0 0 0 1.278-.44l1.78-3.082a1 1 0 0 0-.224-1.361l-2.06-1.607c.096-.442.145-.897.145-1.364zM12 17.75a5.75 5.75 0 1 1 0-11.5a5.75 5.75 0 0 1 0 11.5z"/>
+</svg>
diff --git a/resources/img/default_avatar.png b/resources/img/default_avatar.png
deleted file mode 100644
index bbd4fc661..000000000
Binary files a/resources/img/default_avatar.png and /dev/null differ
diff --git a/src/app.rs b/src/app.rs
index d3ea88bdc..3a1665b82 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -4,6 +4,7 @@
 
 use std::{cell::RefCell, collections::HashMap};
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 use matrix_sdk::{RoomState, ruma::{OwnedEventId, OwnedRoomId, RoomId}};
 use serde::{Deserialize, Serialize};
 use crate::{
@@ -11,171 +12,128 @@ use crate::{
         event_source_modal::{EventSourceModalAction, EventSourceModalWidgetRefExt}, invite_modal::{InviteModalAction, InviteModalWidgetRefExt}, main_desktop_ui::MainDesktopUiAction, navigation_tab_bar::{NavigationBarAction, SelectedTab}, new_message_context_menu::NewMessageContextMenuWidgetRefExt, room_context_menu::RoomContextMenuWidgetRefExt, room_screen::{InviteAction, MessageAction, clear_timeline_states}, rooms_list::{RoomsListAction, RoomsListRef, RoomsListUpdate, clear_all_invited_rooms, enqueue_rooms_list_update}
     }, join_leave_room_modal::{
         JoinLeaveModalKind, JoinLeaveRoomModalAction, JoinLeaveRoomModalWidgetRefExt
-    }, login::login_screen::LoginAction, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction, LogoutConfirmModalWidgetRefExt}, persistence, profile::user_profile_cache::clear_user_profile_cache, room::BasicRoomDetails, shared::{callout_tooltip::{
-        CalloutTooltipWidgetRefExt,
-        TooltipAction,
-    }, confirmation_modal::{ConfirmationModalContent, ConfirmationModalWidgetRefExt}, image_viewer::{ImageViewerAction, LoadState}, popup_list::{PopupKind, enqueue_popup_notification}}, sliding_sync::{DirectMessageRoomAction, MatrixRequest, current_user_id, submit_async_request}, utils::RoomNameId, verification::VerificationAction, verification_modal::{
+    }, login::login_screen::LoginAction, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction, LogoutConfirmModalWidgetRefExt}, persistence, profile::user_profile_cache::clear_user_profile_cache, room::BasicRoomDetails, shared::{confirmation_modal::{ConfirmationModalContent, ConfirmationModalWidgetRefExt}, image_viewer::{ImageViewerAction, LoadState}, popup_list::{PopupKind, enqueue_popup_notification}}, sliding_sync::{DirectMessageRoomAction, MatrixRequest, current_user_id, submit_async_request}, utils::RoomNameId, verification::VerificationAction, verification_modal::{
         VerificationModalAction,
         VerificationModalWidgetRefExt,
     }
 };
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::home::home_screen::HomeScreen;
-    use crate::verification_modal::VerificationModal;
-    use crate::join_leave_room_modal::JoinLeaveRoomModal;
-    use crate::login::login_screen::LoginScreen;
-    use crate::logout::logout_confirm_modal::LogoutConfirmModal;
-    use crate::shared::confirmation_modal::*;
-    use crate::shared::popup_list::*;
-    use crate::home::new_message_context_menu::*;
-    use crate::home::room_context_menu::*;
-    use crate::home::invite_modal::InviteModal;
-    use crate::home::event_source_modal::EventSourceModal;
-    use crate::shared::callout_tooltip::CalloutTooltip;
-    use crate::shared::image_viewer::ImageViewer;
-    use link::tsp_link::TspVerificationModal;
-
-
-    App = {{App}} {
-        ui: <Root>{
-            main_window = <Window> {
-                window: {inner_size: vec2(1280, 800), title: "Robrix"},
-                pass: {clear_color: #FFFFFF00}
-                caption_bar = {
-                    caption_label = {
-                        label = {
-                            margin: {left: 65},
-                            align: {x: 0.5},
-                            text: "Robrix",
-                            draw_text: {color: (COLOR_TEXT)}
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    load_all_resources() do #(App::script_component(vm)) {
+        ui: Root {
+            main_window := Window {
+                window.inner_size: vec2(1280, 800)
+                window.title: "Robrix"
+                pass.clear_color: #FFFFFF00
+                caption_bar: {
+                    caption_label: {
+                        label: {
+                            margin: Inset{left: 65},
+                            align: Align{x: 0.5},
+                            text: "Robrix"
                         }
                     }
-                    windows_buttons = {
-                        // Note: these are the background colors of the buttons used in Windows:
-                        // * idle: Clear, for all three buttons.
-                        // * hover: #E9E9E9 for minimize and maximize, #E81123 for close.
-                        // * down: either darker (on light mode) or lighter (on dark mode).
-                        //
-                        // However, the DesktopButton widget doesn't support drawing a background color yet,
-                        // so these colors are the colors of the icon itself, not the background highlight.
-                        // When it supports that, we will keep the icon color always black,
-                        // and change the background color instead based on the above colors.
-                        min   = { draw_bg: {color: #0, color_hover: #9, color_down: #3} }
-                        max   = { draw_bg: {color: #0, color_hover: #9, color_down: #3} }
-                        close = { draw_bg: {color: #0, color_hover: #E81123, color_down: #FF0015} }
-                    }
-                    draw_bg: {color: #F3F3F3},
                 }
             
 
-                body = {
+                body +: {
                     padding: 0,
 
-                    <View> {
+                    View {
                         width: Fill, height: Fill,
                         flow: Overlay,
 
-                        home_screen_view = <View> {
+                        home_screen_view := View {
                             visible: false
-                            home_screen = <HomeScreen> {}
+                            home_screen := HomeScreen {}
                         }
-                        join_leave_modal = <Modal> {
-                            content: {
-                                join_leave_modal_inner = <JoinLeaveRoomModal> {}
+                        join_leave_modal := Modal {
+                            content +: {
+                                join_leave_modal_inner := JoinLeaveRoomModal {}
                             }
                         }
-                        login_screen_view = <View> {
+                        login_screen_view := View {
                             visible: true
-                            login_screen = <LoginScreen> {}
+                            login_screen := LoginScreen {}
                         }
 
-                        image_viewer_modal = <Modal> {
-                            content: {
+                        image_viewer_modal := Modal {
+                            content +: {
                                 width: Fill, height: Fill,
-                                image_viewer_modal_inner = <ImageViewer> {}
+                                image_viewer_modal_inner := ImageViewer {}
                             }
                         }
                         
                         // Context menus should be shown in front of other UI elements,
                         // but behind verification modals.
-                        new_message_context_menu = <NewMessageContextMenu> { }
-                        room_context_menu = <RoomContextMenu> { }
+                        new_message_context_menu := NewMessageContextMenu { }
+                        room_context_menu := RoomContextMenu { }
 
                         // A modal to confirm sending out an invite to a room.
-                        invite_confirmation_modal = <Modal> {
-                            content: {
-                                invite_confirmation_modal_inner = <PositiveConfirmationModal> {
-                                    wrapper = { buttons_view = { accept_button = {
-                                        draw_icon: {
-                                            svg_file: (ICON_INVITE),
-                                        }
-                                        icon_walk: {width: 28, height: Fit, margin: {left: -10} }
-                                    } } }
-                                }
+                        invite_confirmation_modal := Modal {
+                            content +: {
+                                invite_confirmation_modal_inner := PositiveConfirmationModal {}
                             }
                         }
 
                         // A modal to invite a user to a room.
-                        invite_modal = <Modal> {
-                            content: {
-                                invite_modal_inner = <InviteModal> {}
+                        invite_modal := Modal {
+                            content +: {
+                                invite_modal_inner := InviteModal {}
                             }
                         }
 
                         // Show the logout confirmation modal.
-                        logout_confirm_modal = <Modal> {
-                            content: {
-                                logout_confirm_modal_inner = <LogoutConfirmModal> {}
+                        logout_confirm_modal := Modal {
+                            content +: {
+                                logout_confirm_modal_inner := LogoutConfirmModal {}
                             }
                         }
 
                         // Show the event source modal (View Source for messages).
-                        event_source_modal = <Modal> {
-                            content: {
+                        event_source_modal := Modal {
+                            content +: {
                                 height: Fill,
                                 width: Fill,
-                                align: {x: 0.5, y: 0.5},
-                                event_source_modal_inner = <EventSourceModal> {}
+                                align: Align{x: 0.5, y: 0.5},
+                                event_source_modal_inner := EventSourceModal {}
                             }
                         }
 
                         // Show incoming verification requests in front of the aforementioned UI elements.
-                        verification_modal = <Modal> {
-                            content: {
-                                verification_modal_inner = <VerificationModal> {}
+                        verification_modal := Modal {
+                            content +: {
+                                verification_modal_inner := VerificationModal {}
                             }
                         }
-                        tsp_verification_modal = <Modal> {
-                            content: {
-                                tsp_verification_modal_inner = <TspVerificationModal> {}
+                        tsp_verification_modal := Modal {
+                            content +: {
+                                tsp_verification_modal_inner := TspVerificationModal {}
                             }
                         }
 
                         // A generic modal to confirm any positive action.
-                        positive_confirmation_modal = <Modal> {
-                            content: {
-                                positive_confirmation_modal_inner = <PositiveConfirmationModal> { }
+                        positive_confirmation_modal := Modal {
+                            content +: {
+                                positive_confirmation_modal_inner := PositiveConfirmationModal { }
                             }
                         }
 
                         // A modal to confirm any deletion/removal action.
-                        delete_confirmation_modal = <Modal> {
-                            content: {
-                                delete_confirmation_modal_inner = <NegativeConfirmationModal> { }
+                        delete_confirmation_modal := Modal {
+                            content +: {
+                                delete_confirmation_modal_inner := NegativeConfirmationModal { }
                             }
                         }
 
-                        <PopupList> {}
+                        PopupList {}
 
                         // Tooltips must be shown in front of all other UI elements,
                         // since they can be shown as a hover atop any other widget.
-                        app_tooltip = <CalloutTooltip> {}
+                        app_tooltip := CalloutTooltip {}
                     }
                 } // end of body
             }
@@ -185,7 +143,7 @@ live_design! {
 
 app_main!(App);
 
-#[derive(Live)]
+#[derive(Script, ScriptHook)]
 pub struct App {
     #[live] ui: WidgetRef,
     /// The top-level app state, shared across various parts of the app.
@@ -196,52 +154,32 @@ pub struct App {
     #[rust] waiting_to_navigate_to_room: Option<(BasicRoomDetails, Option<OwnedRoomId>)>,
 }
 
-impl LiveRegister for App {
-    fn live_register(cx: &mut Cx) {
-        // Order matters here, as some widget definitions depend on others.
-        // The main `makepad_widgets` crate must be registered first,
-        // then other first-party makepad crates (like `makepad_code_editor`),
-        // then `shared`` widgets (in which styles are defined),
-        // then other modules widgets.
-        makepad_widgets::live_design(cx);
-        makepad_code_editor::live_design(cx);
-        // Override Makepad's default desktop dark theme with the desktop light theme.
-        cx.link(id!(theme), id!(theme_desktop_light));
-        crate::shared::live_design(cx);
-
-        // If the `tsp` cargo feature is enabled, we create a new "tsp_link" DSL namespace
-        // and link it to the real `tsp_enabled` DSL namespace, which contains real TSP widgets.
-        // If the `tsp` feature is not enabled, link the "tsp_link" DSL namespace
-        // to the `tsp_disabled` DSL namespace instead, which defines dummy placeholder widgets.
-        #[cfg(feature = "tsp")] {
-            crate::tsp::live_design(cx);
-            cx.link(id!(tsp_link), id!(tsp_enabled));
-        }
-        #[cfg(not(feature = "tsp"))] {
-            crate::tsp_dummy::live_design(cx);
-            cx.link(id!(tsp_link), id!(tsp_disabled));
-        }
-
-        crate::settings::live_design(cx);
-        crate::room::live_design(cx);
-        crate::join_leave_room_modal::live_design(cx);
-        crate::verification_modal::live_design(cx);
-        crate::home::live_design(cx);
-        crate::profile::live_design(cx);
-        crate::login::live_design(cx);
-        crate::logout::live_design(cx);
-    }
-}
-
-impl LiveHook for App {
-    fn after_update_from_doc(&mut self, cx: &mut Cx) {
-        self.update_login_visibility(cx);
-    }
-
-    fn after_new_from_doc(&mut self, cx: &mut Cx) {
-        // Here we set the global singleton for the PopupList widget,
-        // which is used to access PopupList Widget from anywhere in the app.
-        crate::shared::popup_list::set_global_popup_list(cx, &self.ui);
+impl App {
+    fn run(vm: &mut ScriptVm) -> Self {
+        // Order matters: base widgets first, then app widgets, then app UI.
+        makepad_widgets::script_mod(vm);
+        makepad_code_editor::script_mod(vm);
+        crate::shared::script_mod(vm);
+
+        #[cfg(feature = "tsp")]
+        crate::tsp::script_mod(vm);
+        #[cfg(not(feature = "tsp"))]
+        crate::tsp_dummy::script_mod(vm);
+
+        crate::settings::script_mod(vm);
+        // RoomInputBar depends on these Home widgets; preload them before room::script_mod.
+        crate::home::location_preview::script_mod(vm);
+        crate::home::tombstone_footer::script_mod(vm);
+        crate::home::editing_pane::script_mod(vm);
+        crate::room::script_mod(vm);
+        crate::join_leave_room_modal::script_mod(vm);
+        crate::verification_modal::script_mod(vm);
+        crate::profile::script_mod(vm);
+        crate::home::script_mod(vm);
+        crate::login::script_mod(vm);
+        crate::logout::script_mod(vm);
+
+        App::from_script_mod(vm, self::script_mod)
     }
 }
 
@@ -268,7 +206,10 @@ impl MatchEvent for App {
         let _app_data_dir = crate::app_data_dir();
         log!("App::handle_startup(): app_data_dir: {:?}", _app_data_dir);
 
-        if let Err(e) = persistence::load_window_state(self.ui.window(ids!(main_window)), cx) {
+        // Set the global singleton for PopupList so other modules can enqueue toasts.
+        crate::shared::popup_list::set_global_popup_list(cx, &self.ui);
+
+        if let Err(e) = persistence::load_window_state(self.ui.window(cx, ids!(main_window)), cx) {
             error!("Failed to load window state: {}", e);
         }
 
@@ -284,31 +225,31 @@ impl MatchEvent for App {
     }
 
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let invite_confirmation_modal_inner = self.ui.confirmation_modal(ids!(invite_confirmation_modal_inner));
+        let invite_confirmation_modal_inner = self.ui.confirmation_modal(cx, ids!(invite_confirmation_modal_inner));
         if let Some(_accepted) = invite_confirmation_modal_inner.closed(actions) {
-            self.ui.modal(ids!(invite_confirmation_modal)).close(cx);
+            self.ui.modal(cx, ids!(invite_confirmation_modal)).close(cx);
         }
 
-        let delete_confirmation_modal_inner = self.ui.confirmation_modal(ids!(delete_confirmation_modal_inner));
+        let delete_confirmation_modal_inner = self.ui.confirmation_modal(cx, ids!(delete_confirmation_modal_inner));
         if let Some(_accepted) = delete_confirmation_modal_inner.closed(actions) {
-            self.ui.modal(ids!(delete_confirmation_modal)).close(cx);
+            self.ui.modal(cx, ids!(delete_confirmation_modal)).close(cx);
         }
 
-        let positive_confirmation_modal_inner = self.ui.confirmation_modal(ids!(positive_confirmation_modal_inner));
+        let positive_confirmation_modal_inner = self.ui.confirmation_modal(cx, ids!(positive_confirmation_modal_inner));
         if let Some(_accepted) = positive_confirmation_modal_inner.closed(actions) {
-            self.ui.modal(ids!(positive_confirmation_modal)).close(cx);
+            self.ui.modal(cx, ids!(positive_confirmation_modal)).close(cx);
         }
 
         for action in actions {
             match action.downcast_ref() {
                 Some(LogoutConfirmModalAction::Open) => {
-                    self.ui.logout_confirm_modal(ids!(logout_confirm_modal_inner)).reset_state(cx);
-                    self.ui.modal(ids!(logout_confirm_modal)).open(cx);
+                    self.ui.logout_confirm_modal(cx, ids!(logout_confirm_modal_inner)).reset_state(cx);
+                    self.ui.modal(cx, ids!(logout_confirm_modal)).open(cx);
                     continue;
                 },
                 Some(LogoutConfirmModalAction::Close { was_internal, .. }) => {
                     if *was_internal {
-                        self.ui.modal(ids!(logout_confirm_modal)).close(cx);
+                        self.ui.modal(cx, ids!(logout_confirm_modal)).close(cx);
                     }
                     continue;
                 },
@@ -318,7 +259,7 @@ impl MatchEvent for App {
             match action.downcast_ref() {
                 Some(LogoutAction::LogoutSuccess) => {
                     self.app_state.logged_in = false;
-                    self.ui.modal(ids!(logout_confirm_modal)).close(cx);
+                    self.ui.modal(cx, ids!(logout_confirm_modal)).close(cx);
                     self.update_login_visibility(cx);
                     self.ui.redraw(cx);
                     continue;
@@ -344,15 +285,15 @@ impl MatchEvent for App {
 
             // Handle an action requesting to open the new message context menu.
             if let MessageAction::OpenMessageContextMenu { details, abs_pos } = action.as_widget_action().cast() {
-                self.ui.callout_tooltip(ids!(app_tooltip)).hide(cx);
-                let new_message_context_menu = self.ui.new_message_context_menu(ids!(new_message_context_menu));
+                self.ui.callout_tooltip(cx, ids!(app_tooltip)).hide(cx);
+                let new_message_context_menu = self.ui.new_message_context_menu(cx, ids!(new_message_context_menu));
                 let expected_dimensions = new_message_context_menu.show(cx, details);
                 // Ensure the context menu does not spill over the window's bounds.
-                let rect = self.ui.window(ids!(main_window)).area().rect(cx);
-                let pos_x = min(abs_pos.x, rect.size.x - expected_dimensions.x);
-                let pos_y = min(abs_pos.y, rect.size.y - expected_dimensions.y);
+                let rect = self.ui.window(cx, ids!(main_window)).area().rect(cx);
+                let _pos_x = min(abs_pos.x, rect.size.x - expected_dimensions.x);
+                let _pos_y = min(abs_pos.y, rect.size.y - expected_dimensions.y);
                 new_message_context_menu.apply_over(cx, live! {
-                    main_content = { margin: { left: (pos_x), top: (pos_y) } }
+                    main_content: { margin: { left: (pos_x), top: (pos_y) } }
                 });
                 self.ui.redraw(cx);
                 continue;
@@ -360,15 +301,15 @@ impl MatchEvent for App {
 
             // Handle an action requesting to open the room context menu.
             if let RoomsListAction::OpenRoomContextMenu { details, pos } = action.as_widget_action().cast() {
-                self.ui.callout_tooltip(ids!(app_tooltip)).hide(cx);
-                let room_context_menu = self.ui.room_context_menu(ids!(room_context_menu));
+                self.ui.callout_tooltip(cx, ids!(app_tooltip)).hide(cx);
+                let room_context_menu = self.ui.room_context_menu(cx, ids!(room_context_menu));
                 let expected_dimensions = room_context_menu.show(cx, details);
                 // Ensure the context menu does not spill over the window's bounds.
-                let rect = self.ui.window(ids!(main_window)).area().rect(cx);
-                let pos_x = min(pos.x, rect.size.x - expected_dimensions.x);
-                let pos_y = min(pos.y, rect.size.y - expected_dimensions.y);
+                let rect = self.ui.window(cx, ids!(main_window)).area().rect(cx);
+                let _pos_x = min(pos.x, rect.size.x - expected_dimensions.x);
+                let _pos_y = min(pos.y, rect.size.y - expected_dimensions.y);
                 room_context_menu.apply_over(cx, live! {
-                    main_content = { margin: { left: (pos_x), top: (pos_y) } }
+                    main_content: { margin: { left: (pos_x), top: (pos_y) } }
                 });
                 self.ui.redraw(cx);
                 continue;
@@ -378,15 +319,14 @@ impl MatchEvent for App {
             if let RoomsListAction::Selected(selected_room) = action.as_widget_action().cast() {
                 // Set the Stack Navigation header to show the name of the newly-selected room.
                 self.ui
-                    .label(ids!(main_content_view.header.content.title_container.title))
+                    .label(cx, ids!(main_content_view.header.content.title_container.title))
                     .set_text(cx, &selected_room.display_name());
 
                 self.app_state.selected_room = Some(selected_room);
 
                 // Navigate to the main content view
                 cx.widget_action(
-                    self.ui.widget_uid(),
-                    &HeapLiveIdPath::default(),
+                    self.ui.widget_uid(), 
                     StackNavigationAction::Push(id!(main_content_view))
                 );
                 self.ui.redraw(cx);
@@ -445,11 +385,11 @@ impl MatchEvent for App {
             match action.as_widget_action().cast() {
                 TooltipAction::HoverIn { text, widget_rect, options } => {
                     // Don't show any tooltips if the message context menu is currently shown.
-                    if self.ui.new_message_context_menu(ids!(new_message_context_menu)).is_currently_shown(cx) {
-                        self.ui.callout_tooltip(ids!(app_tooltip)).hide(cx);
+                    if self.ui.new_message_context_menu(cx, ids!(new_message_context_menu)).is_currently_shown(cx) {
+                        self.ui.callout_tooltip(cx, ids!(app_tooltip)).hide(cx);
                     }
                     else {
-                        self.ui.callout_tooltip(ids!(app_tooltip)).show_with_options(
+                        self.ui.callout_tooltip(cx, ids!(app_tooltip)).show_with_options(
                             cx,
                             &text,
                             widget_rect,
@@ -459,7 +399,7 @@ impl MatchEvent for App {
                     continue;
                 }
                 TooltipAction::HoverOut => {
-                    self.ui.callout_tooltip(ids!(app_tooltip)).hide(cx);
+                    self.ui.callout_tooltip(cx, ids!(app_tooltip)).hide(cx);
                     continue;
                 }
                 _ => {}
@@ -469,14 +409,14 @@ impl MatchEvent for App {
             match action.downcast_ref() {
                 Some(JoinLeaveRoomModalAction::Open { kind, show_tip }) => {
                     self.ui
-                        .join_leave_room_modal(ids!(join_leave_modal_inner))
+                        .join_leave_room_modal(cx, ids!(join_leave_modal_inner))
                         .set_kind(cx, kind.clone(), *show_tip);
-                    self.ui.modal(ids!(join_leave_modal)).open(cx);
+                    self.ui.modal(cx, ids!(join_leave_modal)).open(cx);
                     continue;
                 }
                 Some(JoinLeaveRoomModalAction::Close { was_internal, .. }) => {
                     if *was_internal {
-                        self.ui.modal(ids!(join_leave_modal)).close(cx);
+                        self.ui.modal(cx, ids!(join_leave_modal)).close(cx);
                     }
                     continue;
                 }
@@ -488,22 +428,22 @@ impl MatchEvent for App {
             //
             // Note: other verification actions are handled by the verification modal itself.
             if let Some(VerificationAction::RequestReceived(state)) = action.downcast_ref() {
-                self.ui.verification_modal(ids!(verification_modal_inner))
+                self.ui.verification_modal(cx, ids!(verification_modal_inner))
                     .initialize_with_data(cx, state.clone());
-                self.ui.modal(ids!(verification_modal)).open(cx);
+                self.ui.modal(cx, ids!(verification_modal)).open(cx);
                 continue;
             }
             if let Some(VerificationModalAction::Close) = action.downcast_ref() {
-                self.ui.modal(ids!(verification_modal)).close(cx);
+                self.ui.modal(cx, ids!(verification_modal)).close(cx);
                 continue;
             }
             match action.downcast_ref() {
                 Some(ImageViewerAction::Show(LoadState::Loading(_, _))) => {
-                    self.ui.modal(ids!(image_viewer_modal)).open(cx);
+                    self.ui.modal(cx, ids!(image_viewer_modal)).open(cx);
                     continue;
                 }
                 Some(ImageViewerAction::Hide) => {
-                    self.ui.modal(ids!(image_viewer_modal)).close(cx);
+                    self.ui.modal(cx, ids!(image_viewer_modal)).close(cx);
                     continue;
                 }
                 _ => {}
@@ -514,13 +454,13 @@ impl MatchEvent for App {
                 use crate::tsp::{tsp_verification_modal::{TspVerificationModalAction, TspVerificationModalWidgetRefExt}, TspIdentityAction};
 
                 if let Some(TspIdentityAction::ReceivedDidAssociationRequest { details, wallet_db }) = action.downcast_ref() {
-                    self.ui.tsp_verification_modal(ids!(tsp_verification_modal_inner))
+                    self.ui.tsp_verification_modal(cx, ids!(tsp_verification_modal_inner))
                         .initialize_with_details(cx, details.clone(), wallet_db.deref().clone());
-                    self.ui.modal(ids!(tsp_verification_modal)).open(cx);
+                    self.ui.modal(cx, ids!(tsp_verification_modal)).open(cx);
                     continue;
                 }
                 if let Some(TspVerificationModalAction::Close) = action.downcast_ref() {
-                    self.ui.modal(ids!(tsp_verification_modal)).close(cx);
+                    self.ui.modal(cx, ids!(tsp_verification_modal)).close(cx);
                     continue;
                 }
             }
@@ -529,7 +469,7 @@ impl MatchEvent for App {
             if let Some(InviteAction::ShowInviteConfirmationModal(content_opt)) = action.downcast_ref() {
                 if let Some(content) = content_opt.borrow_mut().take() {
                     invite_confirmation_modal_inner.show(cx, content);
-                    self.ui.modal(ids!(invite_confirmation_modal)).open(cx);
+                    self.ui.modal(cx, ids!(invite_confirmation_modal)).open(cx);
                 }
                 continue;
             }
@@ -538,7 +478,7 @@ impl MatchEvent for App {
             if let Some(PositiveConfirmationModalAction::Show(content_opt)) = action.downcast_ref() {
                 if let Some(content) = content_opt.borrow_mut().take() {
                     positive_confirmation_modal_inner.show(cx, content);
-                    self.ui.modal(ids!(positive_confirmation_modal)).open(cx);
+                    self.ui.modal(cx, ids!(positive_confirmation_modal)).open(cx);
                 }
                 continue;
             }
@@ -546,8 +486,8 @@ impl MatchEvent for App {
             // Handle a request to show the delete confirmation modal.
             if let Some(ConfirmDeleteAction::Show(content_opt)) = action.downcast_ref() {
                 if let Some(content) = content_opt.borrow_mut().take() {
-                    self.ui.confirmation_modal(ids!(delete_confirmation_modal_inner)).show(cx, content);
-                    self.ui.modal(ids!(delete_confirmation_modal)).open(cx);
+                    self.ui.confirmation_modal(cx, ids!(delete_confirmation_modal_inner)).show(cx, content);
+                    self.ui.modal(cx, ids!(delete_confirmation_modal)).open(cx);
                 }
                 continue;
             }
@@ -555,12 +495,12 @@ impl MatchEvent for App {
             // Handle InviteModalAction to open/close the invite modal.
             match action.downcast_ref() {
                 Some(InviteModalAction::Open(room_name_id)) => {
-                    self.ui.invite_modal(ids!(invite_modal_inner)).show(cx, room_name_id.clone());
-                    self.ui.modal(ids!(invite_modal)).open(cx); 
+                    self.ui.invite_modal(cx, ids!(invite_modal_inner)).show(cx, room_name_id.clone());
+                    self.ui.modal(cx, ids!(invite_modal)).open(cx); 
                     continue;
                 }
                 Some(InviteModalAction::Close) => {
-                    self.ui.modal(ids!(invite_modal)).close(cx);
+                    self.ui.modal(cx, ids!(invite_modal)).close(cx);
                     continue;
                 }
                 _ => {}
@@ -569,13 +509,13 @@ impl MatchEvent for App {
             // Handle EventSourceModalAction to open/close the event source modal.
             match action.downcast_ref() {
                 Some(EventSourceModalAction::Open { room_id, event_id, original_json }) => {
-                    self.ui.event_source_modal(ids!(event_source_modal_inner))
+                    self.ui.event_source_modal(cx, ids!(event_source_modal_inner))
                         .show(cx, room_id.clone(), event_id.clone(), original_json.clone());
-                    self.ui.modal(ids!(event_source_modal)).open(cx);
+                    self.ui.modal(cx, ids!(event_source_modal)).open(cx);
                     continue;
                 }
                 Some(EventSourceModalAction::Close) => {
-                    self.ui.modal(ids!(event_source_modal)).close(cx);
+                    self.ui.modal(cx, ids!(event_source_modal)).close(cx);
                     continue;
                 }
                 _ => {}
@@ -621,7 +561,7 @@ impl MatchEvent for App {
                             ..Default::default()
                         },
                     );
-                    self.ui.modal(ids!(positive_confirmation_modal)).open(cx);
+                    self.ui.modal(cx, ids!(positive_confirmation_modal)).open(cx);
                 }
                 Some(DirectMessageRoomAction::FailedToCreate { user_profile, error }) => {
                     enqueue_popup_notification(
@@ -651,7 +591,7 @@ fn clear_all_app_state(cx: &mut Cx) {
 impl AppMain for App {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
         if let Event::Shutdown = event {
-            let window_ref = self.ui.window(ids!(main_window));
+            let window_ref = self.ui.window(cx, ids!(main_window));
             if let Err(e) = persistence::save_window_state(window_ref, cx) {
                 error!("Failed to save window state. Error: {e}");
             }
@@ -701,7 +641,7 @@ impl AppMain for App {
         // We check which overlay views are visible in the order of those views' z-ordering,
         // such that the top-most views get a chance to handle the event first.
 
-        let new_message_context_menu = self.ui.new_message_context_menu(ids!(new_message_context_menu));
+        let new_message_context_menu = self.ui.new_message_context_menu(cx, ids!(new_message_context_menu));
         let is_interactive_hit = utils::is_interactive_hit_event(event);
         let is_pane_shown: bool;
         if new_message_context_menu.is_currently_shown(cx) {
@@ -726,11 +666,11 @@ impl App {
         let show_login = !self.app_state.logged_in;
         if !show_login {
             self.ui
-                .modal(ids!(login_screen_view.login_screen.login_status_modal))
+                .modal(cx, ids!(login_screen_view.login_screen.login_status_modal))
                 .close(cx);
         }
-        self.ui.view(ids!(login_screen_view)).set_visible(cx, show_login);
-        self.ui.view(ids!(home_screen_view)).set_visible(cx, !show_login);
+        self.ui.view(cx, ids!(login_screen_view)).set_visible(cx, show_login);
+        self.ui.view(cx, ids!(home_screen_view)).set_visible(cx, !show_login);
     }
 
     /// Navigates to the given `destination_room`, optionally closing the `room_to_close`.
@@ -746,8 +686,7 @@ impl App {
             let widget_uid = self.ui.widget_uid();
             move |cx: &mut Cx| {
                 cx.widget_action(
-                    widget_uid,
-                    &HeapLiveIdPath::default(),
+                    widget_uid, 
                     DockAction::TabCloseWasPressed(tab_id),
                 );
                 enqueue_rooms_list_update(RoomsListUpdate::HideRoom { room_id: to_close.clone() });
@@ -755,7 +694,15 @@ impl App {
         });
 
         let destination_room_id = destination_room.room_id();
-        let new_selected_room = match cx.get_global::<RoomsListRef>().get_room_state(destination_room_id) {
+        if !cx.has_global::<RoomsListRef>() {
+            error!(
+                "navigate_to_room: missing RoomsListRef global for room {}",
+                destination_room_id
+            );
+            return;
+        }
+        let room_state = cx.get_global::<RoomsListRef>().get_room_state(destination_room_id);
+        let new_selected_room = match room_state {
             Some(RoomState::Joined) => SelectedRoom::JoinedRoom {
                 room_name_id: destination_room.room_name_id().clone(),
             },
@@ -792,8 +739,7 @@ impl App {
             cx.action(NavigationBarAction::GoToHome);
         }
         cx.widget_action(
-            self.ui.widget_uid(),
-            &HeapLiveIdPath::default(),
+            self.ui.widget_uid(), 
             RoomsListAction::Selected(new_selected_room),
         );
         // Select and scroll to the destination room in the rooms list.
@@ -835,8 +781,10 @@ pub struct AppState {
 #[derive(Clone, Default, Debug, Serialize, Deserialize)]
 pub struct SavedDockState {
     /// All items contained in the dock, keyed by their room or space ID.
+    #[serde(skip, default)]
     pub dock_items: HashMap<LiveId, DockItem>,
     /// The rooms that are currently open, keyed by their room or space ID.
+    #[serde(skip, default)]
     pub open_rooms: HashMap<LiveId, SelectedRoom>,
     /// The order in which the rooms were opened, in chronological order
     /// from first opened (at the beginning) to last opened (at the end).
diff --git a/src/home/add_room.rs b/src/home/add_room.rs
index 65c138639..2e165a34d 100644
--- a/src/home/add_room.rs
+++ b/src/home/add_room.rs
@@ -7,52 +7,46 @@ use ruma::{IdParseError, MatrixToUri, MatrixUri, OwnedRoomOrAliasId, OwnedServer
 
 use crate::{app::AppStateAction, home::invite_screen::JoinRoomResultAction, room::{FetchedRoomAvatar, FetchedRoomPreview, RoomPreviewAction}, shared::{avatar::AvatarWidgetRefExt, popup_list::{PopupKind, enqueue_popup_notification}}, sliding_sync::{MatrixRequest, submit_async_request}, utils};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
-    use crate::shared::html_or_plaintext::*;
 
 
     // The main view that allows the user to add (join) or explore new rooms/spaces.
-    pub AddRoomScreen = {{AddRoomScreen}}<ScrollXYView> {
+    mod.widgets.AddRoomScreen = #(AddRoomScreen::register_widget(vm)) {
         width: Fill, height: Fill,
         flow: Down,
-        padding: {top: 5, left: 15, right: 15, bottom: 0},
+        padding: Inset{top: 5, left: 15, right: 15, bottom: 0},
 
         // show_bg: true
-        // draw_bg: {
+        // draw_bg +: {
         //     color: (COLOR_PRIMARY)
         // }
 
-        title = <TitleLabel> {
-            flow: RightWrap,
-            draw_text: {
-                text_style: <TITLE_TEXT>{font_size: 13},
+        title := TitleLabel {
+            flow: Flow.Right{wrap: true},
+            draw_text +: {
+                text_style: TITLE_TEXT {font_size: 13},
                 color: #000
-                wrap: Word
+                flow: Flow.Right{wrap: true}
             }
             text: "Add/Explore Rooms and Spaces"
-            draw_text: {
-                text_style: {font_size: 18},
+            draw_text +: {
+                text_style: theme.font_regular {font_size: 18},
             }
         }
         
-        <LineH> { padding: 10, margin: {top: 10, right: 2} }
+        LineH { padding: 10, margin: Inset{top: 10, right: 2} }
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Join an existing room or space:"
         }
 
         // TODO: support showing/hiding this help with a collapsible widget wrapper
         //       (Accordion widget, once it's added to Makepad upstream)
 
-        help_info = <MessageHtml> {
+        help_info := MessageHtml {
             padding: 7
             width: Fill, height: Fit
             font_size: 10.
@@ -66,225 +60,229 @@ live_design! {
             "
         }
 
-        join_room_view = <View> {
+        join_room_view := View {
             width: Fill,
             height: Fit,
-            margin: { top: 3 }
-            align: {y: 0.5}
+            margin: Inset{ top: 3 }
+            align: Align{y: 0.5}
             spacing: 5
             flow: Right
 
-            room_alias_id_input = <SimpleTextInput> {
-                margin: {top: 0, left: 5, right: 5, bottom: 0},
+            room_alias_id_input := SimpleTextInput {
+                margin: Inset{top: 0, left: 5, right: 5, bottom: 0},
                 width: Fill { max: 400 } // same width as the above `help_info`
                 height: Fit
                 empty_text: "Enter alias, ID, or Matrix link..."
             }
 
-            search_for_room_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 14}
+            search_for_room_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 14}
                 height: Fit
-                margin: { bottom: 4 },
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+                margin: Inset{ bottom: 4 },
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_SEARCH)
+                draw_icon +: {
+                    svg: (ICON_SEARCH)
                     color: (COLOR_PRIMARY)
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_PRIMARY)
-                    text_style: <REGULAR_TEXT> {}
+                    text_style: REGULAR_TEXT {}
                 }
-                icon_walk: {width: 16, height: 16}
+                icon_walk: Walk{width: 16, height: 16}
                 text: "Go"
             }
         }
 
-        loading_room_view = <View> {
+        loading_room_view := View {
             visible: false
             spacing: 5,
             padding: 10,
             width: Fill
             height: Fit
-            align: {y: 0.5}
+            align: Align{y: 0.5}
             flow: Right
 
-            loading_spinner = <LoadingSpinner> {
+            loading_spinner := LoadingSpinner {
                 width: 25,
                 height: 25,
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                     border_size: 3.0,
                 }
             }
 
-            loading_text = <Label> {
+            loading_text := Label {
                 width: Fill, height: Fit
-                flow: RightWrap,
-                draw_text: {
+                flow: Flow.Right{wrap: true},
+                draw_text +: {
                     wrap: Line,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
             }
         }
 
-        error_view = <View> {
+        error_view := View {
             padding: 10
-            error_text = <Label> {
+            error_text := Label {
                 width: Fill, height: Fit
-                flow: RightWrap,
-                draw_text: {
+                flow: Flow.Right{wrap: true},
+                draw_text +: {
                     wrap: Line,
                     color: (COLOR_FG_DANGER_RED),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
             }
         }
 
-        fetched_room_summary = <RoundedView> {
+        fetched_room_summary := RoundedView {
             visible: false
             padding: 15
-            margin: {top: 10, bottom: 5, left: 5, right: 5}
+            margin: Inset{top: 10, bottom: 5, left: 5, right: 5}
             flow: Down
             width: Fill, height: Fit
 
             show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_PRIMARY))
                 border_radius: 4.0,
                 border_size: 1.0
-                border_color: (COLOR_BG_DISABLED)
+                border_color: instance((COLOR_BG_DISABLED))
                 // shadow_color: #0005
                 // shadow_radius: 15.0
                 // shadow_offset: vec2(1.0, 0.0), //5.0,5.0)
             }
 
-            room_name_avatar_view = <View> {
+            room_name_avatar_view := View {
                 width: Fill, height: Fit
                 spacing: 10
-                align: {y: 0.5}
+                align: Align{y: 0.5}
                 flow: Right,
 
-                room_avatar = <Avatar> {
+                room_avatar := Avatar {
                     width: 45, height: 45,
-                    cursor: Default,
-                    text_view = { text = { draw_text: {
-                        text_style: <TITLE_TEXT>{ font_size: 16.0 }
-                    }}}
+                    cursor: MouseCursor.Default,
+                    text_view +: {
+                        text +: {
+                            draw_text +: {
+                                text_style: TITLE_TEXT { font_size: 16.0 }
+                            }
+                        }
+                    }
                 }
 
-                room_name = <Label> {
+                room_name := Label {
                     width: Fill, height: Fit,
-                    margin: {top: 3} // align it with the above room_avatar
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{ font_size: 16 }
+                    margin: Inset{top: 3} // align it with the above room_avatar
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: TITLE_TEXT { font_size: 16 }
                         color: (COLOR_TEXT)
-                        wrap: Word,
+                        flow: Flow.Right{wrap: true},
                     }
                 }
             }
 
             // Something like "This is a [regular|direct] [room|space] with N members."
-            room_summary = <Label> {
+            room_summary := Label {
                 width: Fill, height: Fit
-                flow: RightWrap,
-                margin: {top: 10}
-                draw_text: {
+                flow: Flow.Right{wrap: true},
+                margin: Inset{top: 10}
+                draw_text +: {
                     wrap: Line,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
             }
 
-            subsection_alias_id = <SubsectionLabel> {
-                draw_text: { text_style: { font_size: 12 } }
+            subsection_alias_id := SubsectionLabel {
+                draw_text +: { text_style: theme.font_regular { font_size: 12 } }
             }
 
-            room_alias_and_id_view = <View> {
-                padding: {left: 15}
+            room_alias_and_id_view := View {
+                padding: Inset{left: 15}
                 width: Fill, height: Fit
                 spacing: 8.4 // to line up the colons if the ID wraps to the next line
-                align: {y: 0.5}
-                flow: RightWrap,
+                align: Align{y: 0.5}
+                flow: Flow.Right{wrap: true},
 
-                room_alias = <Label> {
+                room_alias := Label {
                     width: Fit, height: Fit
-                    flow: RightWrap,
-                    draw_text: {
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
                         wrap: Line,
                         color: (MESSAGE_TEXT_COLOR),
-                        text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                        text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                     }
                 }
 
-                room_id = <Label> {
+                room_id := Label {
                     width: Fit, height: Fit
-                    flow: RightWrap,
-                    draw_text: {
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
                         wrap: Line,
                         color: (SMALL_STATE_TEXT_COLOR),
-                        text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                        text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                     }
                 }
             }
 
-            subsection_topic = <SubsectionLabel> {
-                draw_text: { text_style: { font_size: 12 } }
+            subsection_topic := SubsectionLabel {
+                draw_text +: { text_style: theme.font_regular { font_size: 12 } }
             }
 
-            room_topic = <MessageHtml> {
-                padding: {left: 20, top: 5, right: 10, bottom: 10}
+            room_topic := MessageHtml {
+                padding: Inset{left: 20, top: 5, right: 10, bottom: 10}
                 width: Fill,
-                height: Fit { max: 200 }
+                height: Fit
                 font_size: 11
                 font_color: (MESSAGE_TEXT_COLOR)
             }
 
-            buttons_view = <View> {
+            buttons_view := View {
                 width: Fill
                 height: Fit,
-                flow: RightWrap,
-                align: {y: 0.5}
+                flow: Flow.Right{wrap: true},
+                align: Align{y: 0.5}
                 spacing: 15
-                margin: {top: 15}
+                margin: Inset{top: 15}
 
                 // This button's text is based on the room state (e.g., joined, left, invited)
                 // the room's join rules (e.g., public, can knock, invite-only (in which we disable it)).
-                join_room_button = <RobrixIconButton> {
+                join_room_button := RobrixIconButton {
                     padding: 15,
-                    draw_icon: {
-                        svg_file: (ICON_JOIN_ROOM),
+                    draw_icon +: {
+                        svg: (ICON_JOIN_ROOM),
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: {width: 17, height: 17, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 17, height: 17, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: #f0fff0 // light green
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                        color: instance(#f0fff0) // light green
                     }
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
                 }
 
-                cancel_button = <RobrixIconButton> {
-                    align: {x: 0.5, y: 0.5}
+                cancel_button := RobrixIconButton {
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15
-                    draw_icon: {
-                        svg_file: (ICON_FORBIDDEN)
+                    draw_icon +: {
+                        svg: (ICON_FORBIDDEN)
                         color: (COLOR_FG_DANGER_RED),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
-                        border_color: (COLOR_FG_DANGER_RED),
-                        color: (COLOR_BG_DANGER_RED)
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_DANGER_RED)),
+                        color: instance((COLOR_BG_DANGER_RED))
                     }
                     text: "Cancel"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_DANGER_RED),
                     }
                 }
@@ -294,7 +292,7 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct AddRoomScreen {
     #[deref] view: View,
     #[rust] state: AddRoomState,
@@ -392,10 +390,10 @@ impl Widget for AddRoomScreen {
         self.view.handle_event(cx, event, scope);
         
         if let Event::Actions(actions) = event {
-            let room_alias_id_input = self.view.text_input(ids!(room_alias_id_input));
-            let search_for_room_button = self.view.button(ids!(search_for_room_button));
-            let cancel_button = self.view.button(ids!(fetched_room_summary.buttons_view.cancel_button));
-            let join_room_button = self.view.button(ids!(fetched_room_summary.buttons_view.join_room_button));
+            let room_alias_id_input = self.view.text_input(cx, ids!(room_alias_id_input));
+            let search_for_room_button = self.view.button(cx, ids!(search_for_room_button));
+            let cancel_button = self.view.button(cx, ids!(fetched_room_summary.buttons_view.cancel_button));
+            let join_room_button = self.view.button(cx, ids!(fetched_room_summary.buttons_view.join_room_button));
 
             // Enable or disable the button based on if the text input is empty.
             if let Some(text) = room_alias_id_input.changed(actions) {
@@ -579,9 +577,9 @@ impl Widget for AddRoomScreen {
 
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        let loading_room_view = self.view.view(ids!(loading_room_view));
-        let fetched_room_summary = self.view.view(ids!(fetched_room_summary));
-        let error_view = self.view.view(ids!(error_view));
+        let loading_room_view = self.view.view(cx, ids!(loading_room_view));
+        let fetched_room_summary = self.view.view(cx, ids!(fetched_room_summary));
+        let error_view = self.view.view(cx, ids!(error_view));
 
         match &self.state {
             AddRoomState::WaitingOnUserInput => {
@@ -593,11 +591,11 @@ impl Widget for AddRoomScreen {
                 loading_room_view.set_visible(cx, false);
                 fetched_room_summary.set_visible(cx, false); 
                 error_view.set_visible(cx, true);
-                error_view.label(ids!(error_text)).set_text(cx, err_str);
+                error_view.label(cx, ids!(error_text)).set_text(cx, err_str);
             }
             AddRoomState::Parsed { room_or_alias_id, .. } => {
                 loading_room_view.set_visible(cx, true);
-                loading_room_view.label(ids!(loading_text)).set_text(
+                loading_room_view.label(cx, ids!(loading_text)).set_text(
                     cx,
                     &format!("Fetching {room_or_alias_id}..."),
                 );
@@ -613,7 +611,7 @@ impl Widget for AddRoomScreen {
                 error_view.set_visible(cx, false);
 
                 // Populate the content of the fetched room preview.
-                let room_avatar = fetched_room_summary.avatar(ids!(room_avatar));
+                let room_avatar = fetched_room_summary.avatar(cx, ids!(room_avatar));
                 match &frp.room_avatar {
                     FetchedRoomAvatar::Text(text) => {
                         room_avatar.show_text(cx, None, None, text);
@@ -639,35 +637,35 @@ impl Widget for AddRoomScreen {
                     Some(RoomType::Space) => ("space", "Space"),
                     _ => ("room", "Room"),
                 };
-                let room_name = fetched_room_summary.label(ids!(room_name));
+                let room_name = fetched_room_summary.label(cx, ids!(room_name));
                 match frp.room_name_id.name_for_avatar().as_deref() {
                     Some(n) => room_name.set_text(cx, n),
                     _ => room_name.set_text(cx, &format!("Unnamed {room_or_space_uc}, ID: {}", frp.room_name_id.room_id())),
                 }
 
-                fetched_room_summary.label(ids!(subsection_alias_id)).set_text(
+                fetched_room_summary.label(cx, ids!(subsection_alias_id)).set_text(
                     cx,
                     &format!("Main {room_or_space_uc} Alias and ID"),
                 );
-                fetched_room_summary.label(ids!(room_alias)).set_text(
+                fetched_room_summary.label(cx, ids!(room_alias)).set_text(
                     cx,
                     &format!("Alias: {}", frp.canonical_alias.as_ref().map_or("not set", |a| a.as_str())),
                 );
-                fetched_room_summary.label(ids!(room_id)).set_text(
+                fetched_room_summary.label(cx, ids!(room_id)).set_text(
                     cx,
                     &format!("ID: {}", frp.room_name_id.room_id().as_str()),
                 );
-                fetched_room_summary.label(ids!(subsection_topic)).set_text(
+                fetched_room_summary.label(cx, ids!(subsection_topic)).set_text(
                     cx,
                     &format!("{room_or_space_uc} Topic"),
                 );
-                fetched_room_summary.html(ids!(room_topic)).set_text(
+                fetched_room_summary.html(cx, ids!(room_topic)).set_text(
                     cx,
                     frp.topic.as_deref().unwrap_or("<i>No topic set</i>"),
                 );
 
-                let room_summary = fetched_room_summary.label(ids!(room_summary));
-                let join_room_button = fetched_room_summary.button(ids!(join_room_button));
+                let room_summary = fetched_room_summary.label(cx, ids!(room_summary));
+                let join_room_button = fetched_room_summary.button(cx, ids!(join_room_button));
                 let join_function = match (&frp.state, &frp.join_rule) {
                     (Some(RoomState::Joined), _) => {
                         room_summary.set_text(cx, &format!("You have already joined this {room_or_space_lc}."));
@@ -762,7 +760,7 @@ impl Widget for AddRoomScreen {
                         join_room_button.set_enabled(cx, !matches!(join_function, JoinButtonFunction::None));
                         self.join_function = join_function;
                         join_room_button.reset_hover(cx);
-                        fetched_room_summary.button(ids!(cancel_button)).reset_hover(cx);
+                        fetched_room_summary.button(cx, ids!(cancel_button)).reset_hover(cx);
                     }
                     AddRoomState::Knocked { .. } => {
                         room_summary.set_text(cx, &format!("You have knocked on this {room_or_space_lc} and must now wait for someone to invite you in."));
diff --git a/src/home/edited_indicator.rs b/src/home/edited_indicator.rs
index 91911a3df..07fb24f0d 100644
--- a/src/home/edited_indicator.rs
+++ b/src/home/edited_indicator.rs
@@ -11,35 +11,33 @@ use chrono::{DateTime, Local};
 use makepad_widgets::*;
 use matrix_sdk_ui::timeline::EventTimelineItem;
 
-use crate::{shared::callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, utils::unix_time_millis_to_datetime};
+use crate::utils::unix_time_millis_to_datetime;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
 
-    pub EDITED_INDICATOR_FONT_SIZE  = 9.5
-    pub EDITED_INDICATOR_FONT_COLOR = #666666
+    mod.widgets.EDITED_INDICATOR_FONT_SIZE = 9.5
+    mod.widgets.EDITED_INDICATOR_FONT_COLOR = #666666
 
-    pub EditedIndicator = {{EditedIndicator}} {
+    mod.widgets.EditedIndicator = #(EditedIndicator::register_widget(vm)) {
         visible: false, // default to hidden
         width: Fit, height: Fit
         flow: Right,
         padding: 0,
-        margin: { top: 5 }
+        margin: Inset{ top: 5 }
 
         // TODO: re-enable this once we have implemented the edit history modal
-        // cursor: Hand,
+        // cursor: MouseCursor.Hand,
 
-        edit_html = <Html> {
+        edit_html := Html {
             width: Fit, height: Fit
             flow: Right, // do not wrap
             padding: 0,
             margin: 0,
 
-            font_size: (EDITED_INDICATOR_FONT_SIZE),
+            font_size: (mod.widgets.EDITED_INDICATOR_FONT_SIZE),
             font_color: (COLOR_ROBRIX_PURPLE),
             body: "(<u>edited</u>)",
         }
@@ -47,7 +45,7 @@ live_design! {
 }
 
 /// A interactive label that indicates a message has been edited.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct EditedIndicator {
     #[deref] view: View,
     #[rust] latest_edit_ts: Option<DateTime<Local>>,
@@ -67,7 +65,7 @@ impl Widget for EditedIndicator {
             //     false
             // },
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
                 false
             }
             _ => false,
@@ -81,8 +79,7 @@ impl Widget for EditedIndicator {
                 "Last edit time unknown".to_string()
             };
             cx.widget_action(
-                self.widget_uid(),
-                &scope.path,
+                self.widget_uid(), 
                 TooltipAction::HoverIn {
                     text,
                     widget_rect: area.rect(cx),
@@ -125,10 +122,11 @@ impl EditedIndicatorRef {
 
 
 /// Actions emitted by an `EditedIndicator` widget.
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum EditedIndicatorAction {
     /// The indicator was clicked, and thus we should open
     /// a modal/dialog showing the message's full edit history.
     ShowEditHistory,
+    #[default]
     None,
 }
diff --git a/src/home/editing_pane.rs b/src/home/editing_pane.rs
index 842682adf..f65f5dfe1 100644
--- a/src/home/editing_pane.rs
+++ b/src/home/editing_pane.rs
@@ -16,123 +16,117 @@ use crate::{
     sliding_sync::{submit_async_request, MatrixRequest, TimelineKind},
 };
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
-    use crate::shared::mentionable_text_input::MentionableTextInput;
-
-    EditingContent = <View> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.EditingContent = View {
         width: Fill,
-        height: Fit { max: Rel { base: Full, factor: 0.625 } }
-        align: {x: 0.5, y: 1.0}, // centered horizontally, bottom-aligned
-        padding: { left: 20, right: 20, top: 10, bottom: 10 }
-        margin: {top: 2}
+        height: Fit
+        align: Align{x: 0.5, y: 1.0}, // centered horizontally, bottom-aligned
+        padding: Inset{ left: 20, right: 20, top: 10, bottom: 10 }
+        margin: Inset{top: 2}
         spacing: 10,
         flow: Down,
 
         show_bg: false // don't cover up the RoomInputBar
 
-        <View> {
+        View {
             width: Fill, height: Fit
             flow: Right
-            align: {y: 0.5}
-            padding: {left: 5, right: 5}
+            align: Align{y: 0.5}
+            padding: Inset{left: 5, right: 5}
 
-            <Label> {
+            Label {
                 width: Fill,
                 flow: Right, // do not wrap
-                margin: {top: 3}
-                draw_text: {
-                    text_style: <USERNAME_TEXT_STYLE> {},
+                margin: Inset{top: 3}
+                draw_text +: {
+                    text_style: USERNAME_TEXT_STYLE {},
                     color: #222,
                 }
                 text: "Editing:"
             }
 
-            cancel_button = <RobrixIconButton> {
+            cancel_button := RobrixIconButton {
                 width: Fit,
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: {left: 5, right: 5},
+                margin: Inset{left: 5, right: 5},
 
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                     border_radius: 5
                 }
-                draw_icon: {
-                    svg_file: (ICON_CLOSE),
+                draw_icon +: {
+                    svg: (ICON_CLOSE),
                     color: (COLOR_FG_DANGER_RED)
                 }
-                icon_walk: {width: 16, height: 16, margin: 0}
+                icon_walk: Walk{width: 16, height: 16, margin: 0}
             }
 
-            accept_button = <RobrixIconButton> {
+            accept_button := RobrixIconButton {
                 width: Fit,
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: {left: 5},
+                margin: Inset{left: 5},
 
-                draw_bg: {
-                    border_color: (COLOR_FG_ACCEPT_GREEN),
-                    color: (COLOR_BG_ACCEPT_GREEN)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                    color: instance((COLOR_BG_ACCEPT_GREEN))
                     border_radius: 5
                 }
-                draw_icon: {
-                    svg_file: (ICON_CHECKMARK)
+                draw_icon +: {
+                    svg: (ICON_CHECKMARK)
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
-                icon_walk: {width: 16, height: 16, margin: 0}
+                icon_walk: Walk{width: 16, height: 16, margin: 0}
             }
         }
 
-        <LineH> { }
+        LineH { }
 
-        edit_text_input = <MentionableTextInput> {
+        edit_text_input := MentionableTextInput {
             width: Fill
-            height: Fit { max: Rel { base: Full, factor: 0.625 } }
-            margin: { bottom: 5, top: 5 }
+            height: Fit
+            margin: Inset{ bottom: 5, top: 5 }
         }
     }
 
 
-    pub EditingPane = {{EditingPane}} {
+    mod.widgets.EditingPane = #(EditingPane::register_widget(vm)) {
         visible: false,
         width: Fill,
-        height: Fit { max: Rel { base: Full, factor: 0.625 } }
-        align: {x: 0.5, y: 1.0}
+        height: Fit
+        align: Align{x: 0.5, y: 1.0}
         // TODO: FIXME: this is a hack to make the editing pane
         //              able to slide out of the bottom of the screen.
         //              (Waiting on a Makepad-level fix for this.)
-        margin: {top: 1000}
+        margin: Inset{top: 1000}
 
-        editing_content = <EditingContent> { }
+        editing_content := mod.widgets.EditingContent { }
 
-        animator: {
-            panel = {
-                default: hide,
-                show = {
+        animator: Animator{
+            panel: {
+                default: @hide
+                show: AnimatorState{
                     redraw: true,
                     from: {all: Forward {duration: 0.8}}
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
-                    apply: { margin: {top: 0} }
+                    apply: { margin: Inset{top: 0} }
                 }
-                hide = {
+                hide: AnimatorState{
                     redraw: true,
                     from: {all: Forward {duration: 0.8}}
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     // TODO: FIXME: this is a hack to make the editing pane
                     //              able to slide out of the bottom of the screen.
                     //              (Waiting on a Makepad-level fix for this.)
-                    apply: { margin: {top: 1000} }
+                    apply: { margin: Inset{top: 1000} }
                 }
             }
         }
@@ -140,13 +134,21 @@ live_design! {
 }
 
 /// Action emitted by the EditingPane widget.
-#[derive(Clone, DefaultNone, Debug)]
+#[derive(Clone, Default, Debug)]
 pub enum EditingPaneAction {
     /// The editing pane has been closed/hidden.
     Hidden,
+    #[default]
     None,
 }
 
+impl ActionDefaultRef for EditingPaneAction {
+    fn default_ref() -> &'static Self {
+        static DEFAULT: EditingPaneAction = EditingPaneAction::None;
+        &DEFAULT
+    }
+}
+
 /// The information maintained by the EditingPane widget.
 struct EditingPaneInfo {
     event_tl_item: EventTimelineItem,
@@ -154,8 +156,9 @@ struct EditingPaneInfo {
 }
 
 /// A view that slides in from the bottom of the screen to allow editing a message.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct EditingPane {
+    #[source] source: ScriptObjectRef,
     #[deref]
     view: View,
     #[animator]
@@ -180,11 +183,14 @@ impl Widget for EditingPane {
         // If the animator is in the `hide` state and has finished animating out,
         // that means it has fully animated off-screen and can be set to invisible.
         if self.animator_in_state(cx, ids!(panel.hide)) {
-            match (self.is_animating_out, animator_action.is_animating()) {
+            match (
+                self.is_animating_out,
+                matches!(animator_action, AnimatorAction::Animating { .. }),
+            ) {
                 (true, false) => {
                     self.visible = false;
                     self.info = None;
-                    cx.widget_action(self.widget_uid(), &scope.path, EditingPaneAction::Hidden);
+                    cx.widget_action(self.widget_uid(),  EditingPaneAction::Hidden);
                     cx.revert_key_focus();
                     self.redraw(cx);
                     return;
@@ -199,11 +205,13 @@ impl Widget for EditingPane {
 
         if let Event::Actions(actions) = event {
 
-            let edit_text_input = self.mentionable_text_input(ids!(editing_content.edit_text_input)).text_input_ref();
+            let edit_text_input = self
+                .mentionable_text_input(cx, ids!(editing_content.edit_text_input))
+                .text_input_ref(cx);
 
             // Hide the editing pane if the cancel button was clicked
             // or if the `Escape` key was pressed within the edit text input.
-            if self.button(ids!(cancel_button)).clicked(actions)
+            if self.button(cx, ids!(cancel_button)).clicked(actions)
                 || edit_text_input.escaped(actions)
             {
                 self.animator_play(cx, ids!(panel.hide));
@@ -213,7 +221,7 @@ impl Widget for EditingPane {
 
             let Some(info) = self.info.as_ref() else { return };
 
-            if self.button(ids!(accept_button)).clicked(actions)
+            if self.button(cx, ids!(accept_button)).clicked(actions)
                 || edit_text_input.returned(actions).is_some_and(|(_, m)| m.is_primary())
             {
                 let edited_text = edit_text_input.text().trim().to_string();
@@ -441,7 +449,7 @@ impl EditingPane {
             return;
         }
 
-        let edit_text_input = self.mentionable_text_input(ids!(editing_content.edit_text_input));
+        let edit_text_input = self.mentionable_text_input(cx, ids!(editing_content.edit_text_input));
 
         if let Some(message) = event_tl_item.content().as_message() {
             edit_text_input.set_text(cx, message.body());
@@ -463,13 +471,13 @@ impl EditingPane {
         });
 
         self.visible = true;
-        self.button(ids!(accept_button)).reset_hover(cx);
-        self.button(ids!(cancel_button)).reset_hover(cx);
+        self.button(cx, ids!(accept_button)).reset_hover(cx);
+        self.button(cx, ids!(cancel_button)).reset_hover(cx);
         self.animator_play(cx, ids!(panel.show));
 
         // Set the text input's cursor to the end and give it key focus.
-        let inner_text_input = edit_text_input.text_input_ref();
-        let text_len = edit_text_input.text().len();
+        let inner_text_input = edit_text_input.text_input_ref(cx);
+        let text_len = edit_text_input.text(cx).len();
         inner_text_input.set_cursor(
             cx,
             Cursor { index: text_len, prefer_next_row: false },
@@ -480,12 +488,12 @@ impl EditingPane {
     }
 
     /// Returns the state of this `EditingPane`, if any.
-    pub fn save_state(&self) -> Option<EditingPaneState> {
+    pub fn save_state(&self, cx: &mut Cx) -> Option<EditingPaneState> {
         self.info.as_ref().map(|info| EditingPaneState {
             event_tl_item: info.event_tl_item.clone(),
             text_input_state: self
-                .mentionable_text_input(ids!(editing_content.edit_text_input))
-                .text_input_ref()
+                .mentionable_text_input(cx, ids!(editing_content.edit_text_input))
+                .text_input_ref(cx)
                 .save_state(),
         })
     }
@@ -498,16 +506,16 @@ impl EditingPane {
         timeline_kind: TimelineKind,
     ) {
         let EditingPaneState { event_tl_item, text_input_state } = editing_pane_state;
-        self.mentionable_text_input(ids!(editing_content.edit_text_input))
-            .text_input_ref()
+        self.mentionable_text_input(cx, ids!(editing_content.edit_text_input))
+            .text_input_ref(cx)
             .restore_state(cx, text_input_state);
         self.info = Some(EditingPaneInfo {
             event_tl_item,
             timeline_kind,
         });
         self.visible = true;
-        self.button(ids!(accept_button)).reset_hover(cx);
-        self.button(ids!(cancel_button)).reset_hover(cx);
+        self.button(cx, ids!(accept_button)).reset_hover(cx);
+        self.button(cx, ids!(cancel_button)).reset_hover(cx);
         self.animator_play(cx, ids!(panel.show));
         self.redraw(cx);
 
@@ -561,8 +569,8 @@ impl EditingPaneRef {
     }
 
     /// See [`EditingPane::save_state()`].
-    pub fn save_state(&self) -> Option<EditingPaneState> {
-        self.borrow()?.save_state()
+    pub fn save_state(&self, cx: &mut Cx) -> Option<EditingPaneState> {
+        self.borrow()?.save_state(cx)
     }
 
     /// Restores the state of this `EditingPane` from the given `event_tl_item` and `text_input_state`.
diff --git a/src/home/event_group.rs b/src/home/event_group.rs
new file mode 100644
index 000000000..dc8ed5b03
--- /dev/null
+++ b/src/home/event_group.rs
@@ -0,0 +1,830 @@
+use makepad_widgets::*;
+use matrix_sdk::ruma::{OwnedEventId, OwnedUserId, UserId};
+use matrix_sdk_ui::timeline::{
+    AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind
+};
+use rangemap::RangeMap;
+use std::{collections::HashMap, sync::Arc};
+use indexmap::IndexMap;
+
+use crate::{home::room_read_receipt::{AvatarRowWidgetRefExt, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT}, sliding_sync::TimelineKind};
+
+// Minimum number of sequential small state events to collapse
+const MIN_GROUP_SIZE_FOR_COLLAPSE: usize = 3;
+// Maximum number of user names to display before coalescing
+const SUMMARY_LENGTH: usize = 4;
+
+/// Represents a group of adjacent small state events that can be collapsed/expanded in the UI.
+///
+/// This struct encapsulates the grouping logic for small state events (membership changes,
+/// profile changes, etc.) that appear together in the timeline. Groups can be toggled
+/// between expanded (showing all individual events) and collapsed (showing a summary).
+///
+/// The group is identified by a range of timeline item indices, and contains a mapping
+/// of user events within that range for generating summaries.
+#[derive(Debug, Default, Clone, PartialEq, Eq)]
+pub struct SmallStateGroup {
+    pub room_creator: Option<OwnedUserId>,
+    /// Mapping of user IDs to their events within this group.
+    ///
+    /// Key: The user ID who performed the state changes (OwnedUserId).
+    /// Value: Vector of UserEvent containing details about the specific state changes
+    /// for that user within this group.
+    ///
+    /// This simplified structure allows efficient lookup and summary generation.
+    /// Event ordering is preserved within each user's Vec<UserEvent> by their index field.
+    pub user_events_map: HashMap<OwnedUserId, Vec<UserEvent>>,
+
+    /// Cached summary text to avoid recomputation during rendering.
+    /// This is computed once when the group is created or modified.
+    pub cached_summary: Option<String>,
+
+    /// Cached list of user IDs for avatar display, pre-sorted and limited.
+    /// This avoids expensive sorting and extraction during rendering.
+    pub cached_avatar_user_ids: Option<Vec<OwnedUserId>>,
+}
+
+/// Combined state for managing small state groups
+#[derive(Default, Debug)]
+pub struct SmallStateGroupManager {
+    /// Map of small state groups by their index ranges, storing the group header's event_id
+    pub small_state_groups: RangeMap<usize, OwnedEventId>,
+    /// Map from event_id to actual SmallStateGroup data
+    pub groups_by_event_id: HashMap<OwnedEventId, SmallStateGroup>,
+}
+
+impl SmallStateGroupManager {
+    /// Recomputes the grouped small state view from a flat list of `UserEvent`s.
+    ///
+    /// This method:
+    /// - Clears and repopulates `small_state_groups` with fresh group ranges.
+    /// - Detects and builds a dedicated room-creation group for the creator's early events.
+    /// - Builds groups of consecutive small state events for other transitions.
+    pub fn compute_group_state(&mut self, small_state_events: Vec<UserEvent>) {
+        if small_state_events.is_empty() {
+            self.small_state_groups.clear();
+            self.groups_by_event_id.clear();
+            return;
+        }
+        self.small_state_groups.clear();
+        self.groups_by_event_id.clear();
+        // Track room creation state locally
+        let mut creation_events = Vec::new();
+        let mut creation_end_index = None;
+        let mut room_creator = None;
+        let mut regular_events = Vec::new();
+
+        for event in &small_state_events {
+            // Skip VirtualTimelineItem events - they should not be grouped
+            if event.transition == SmallStateType::VirtualTimelineItem {
+                continue;
+            }
+
+            if event.transition == SmallStateType::CreateRoom {
+                // Start tracking room creation
+                room_creator = event.sender.clone();
+                creation_end_index = Some(event.index);
+                creation_events.push(event.clone());
+            } else if let Some(last_creation_index) = creation_end_index {
+                if (event.transition == SmallStateType::Joined || event.transition == SmallStateType::ConfigureRoom) &&
+                   event.sender.as_ref() == room_creator.as_ref() &&
+                   event.index == last_creation_index + 1 {
+                    // Include consecutive room creator events in room creation group
+                    creation_end_index = Some(event.index);
+                    creation_events.push(event.clone());
+                } else {
+                    // End room creation group and process it
+                    if !creation_events.is_empty() {
+                        self.create_room_creation_group(&creation_events);
+                        creation_events.clear();
+                    }
+                    creation_end_index = None;
+                    room_creator = None;
+                    // Add current event to regular events
+                    regular_events.push(event.clone());
+                }
+            } else {
+                // Add to regular events
+                regular_events.push(event.clone());
+            }
+        }
+
+        // Process any remaining room creation group
+        if !creation_events.is_empty() {
+            self.create_room_creation_group(&creation_events);
+        }
+
+        // Group consecutive regular events
+        if regular_events.is_empty() {
+            return;
+        }
+        let mut current_group_events = vec![regular_events[0].clone()];
+        for i in 1..regular_events.len() {
+            let prev_index = regular_events[i - 1].index;
+            let current_index = regular_events[i].index;
+
+            // Check if current event is consecutive to the previous one
+            if current_index == prev_index + 1 {
+                // Add to current group
+                current_group_events.push(regular_events[i].clone());
+            } else {
+                // Process current group if it has enough events
+                if current_group_events.len() >= MIN_GROUP_SIZE_FOR_COLLAPSE {
+                    self.create_group_from_events(&current_group_events);
+                }
+
+                // Start a new group
+                current_group_events = vec![regular_events[i].clone()];
+            }
+        }
+
+        // Process the final group
+        if current_group_events.len() >= MIN_GROUP_SIZE_FOR_COLLAPSE {
+            self.create_group_from_events(&current_group_events);
+        }
+    }
+
+    /// Creates or updates a room-creation `SmallStateGroup` from the given creation events.
+    ///
+    /// The resulting group:
+    /// - Covers the contiguous range spanned by `events`.
+    /// - Is marked as `is_room_creation` and stores the room creator.
+    /// - Is registered in both `small_state_groups` and `groups_by_event_id`.
+    fn create_room_creation_group(&mut self, events: &[UserEvent]) {
+        let (Some(first_event), Some(last_event)) = (events.first(), events.last()) else {
+            return;
+        };
+
+        let start_index = first_event.index;
+        let end_index = last_event.index + 1;
+
+        let mut user_events_map = HashMap::new();
+        for event in events {
+            if let Some(effective_user_id) = get_effective_user_id(event) {
+                let user_events_vec: &mut Vec<UserEvent> = user_events_map.entry(effective_user_id).or_default();
+                if !user_events_vec.iter().any(|e| e.index == event.index) {
+                    user_events_vec.push(event.clone());
+                }
+            }
+        }
+
+        // Get or create a synthetic event_id if none exists
+        let header_event_id = match first_event.event_id.clone() {
+            Some(id) => id,
+            None => {
+                // Create synthetic event ID based on range
+                let Ok(id) = OwnedEventId::try_from(format!("$synthetic_{}_{}", start_index, end_index).as_str()) else {
+                    return;
+                };
+                id
+            }
+        };
+
+        self.small_state_groups.insert(start_index..end_index, header_event_id.clone());
+
+        use std::collections::hash_map::Entry;
+        match self.groups_by_event_id.entry(header_event_id) {
+            Entry::Occupied(mut entry) => {
+                let group = entry.get_mut();
+                group.room_creator = first_event.sender.clone();
+                group.user_events_map = user_events_map;
+                group.cached_summary = None;
+                group.cached_avatar_user_ids = None;
+                group.update_cached_data();
+            }
+            Entry::Vacant(entry) => {
+                let mut group = SmallStateGroup {
+                    room_creator: events.first().and_then(|e| e.sender.clone()),
+                    user_events_map,
+                    cached_summary: None,
+                    cached_avatar_user_ids: None,
+                };
+                group.update_cached_data();
+                entry.insert(group);
+            }
+        }
+    }
+
+    /// Creates or updates a regular `SmallStateGroup` from consecutive `UserEvent`s.
+    ///
+    /// The resulting group:
+    /// - Covers the contiguous range spanned by `events`.
+    /// - Is registered in `small_state_groups` and `groups_by_event_id`.
+    /// - Is not marked as a room-creation group.
+    fn create_group_from_events(&mut self, events: &[UserEvent]) {
+        if events.is_empty() {
+            return;
+        }
+
+        let start_index = events.first().unwrap().index;
+        let end_index = events.last().unwrap().index + 1;
+
+        let mut user_events_map = HashMap::new();
+        for event in events {
+            if let Some(effective_user_id) = get_effective_user_id(event) {
+                let user_events_vec: &mut Vec<UserEvent> = user_events_map.entry(effective_user_id).or_default();
+                if !user_events_vec.iter().any(|e| e.index == event.index) {
+                    user_events_vec.push(event.clone());
+                }
+            }
+        }
+
+        // Get or create a synthetic event_id if none exists
+        let header_event_id = events.first()
+            .and_then(|e| e.event_id.clone())
+            .unwrap_or_else(|| {
+                // Create synthetic event ID based on range
+                OwnedEventId::try_from(format!("$synthetic_{}_{}", start_index, end_index).as_str())
+                    .expect("Failed to create synthetic event ID")
+            });
+
+        self.small_state_groups.insert(start_index..end_index, header_event_id.clone());
+
+        use std::collections::hash_map::Entry;
+        match self.groups_by_event_id.entry(header_event_id) {
+            Entry::Occupied(mut entry) => {
+                let group = entry.get_mut();
+                group.room_creator = None;
+                group.user_events_map = user_events_map;
+                group.cached_summary = None;
+                group.cached_avatar_user_ids = None;
+                group.update_cached_data();
+            }
+            Entry::Vacant(entry) => {
+                let mut group = SmallStateGroup {
+                    room_creator: None,
+                    user_events_map,
+                    cached_summary: None,
+                    cached_avatar_user_ids: None,
+                };
+                group.update_cached_data();
+                entry.insert(group);
+            }
+        }
+    }
+
+    /// Checks whether the portal-list item at `item_id` is part of a group.
+    ///
+    /// Returns `Some(Range)` if the item is within a group range, `None` otherwise.
+    /// The range indicates the full extent of the group in the timeline.
+    pub fn check_group_range(&self, item_id: usize) -> Option<std::ops::Range<usize>> {
+        self.small_state_groups.get_key_value(&item_id)
+            .map(|(range, _)| range.clone())
+    }
+
+    /// Gets the group metadata for a group starting at the given item_id.
+    ///
+    /// Returns `None` if there's no group starting at this item_id.
+    pub fn get_group_at_item_id(&self, item_id: usize) -> Option<&SmallStateGroup> {
+        self.small_state_groups
+            .iter()
+            .find(|(range, _)| range.start == item_id)
+            .and_then(|(_, event_id)| self.groups_by_event_id.get(event_id))
+    }
+}
+
+/// Represent Small state type.
+#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
+pub enum SmallStateType {
+    CreateRoom,
+    ConfigureRoom,
+    Joined,
+    Left,
+    JoinedAndLeft,
+    LeftAndJoined,
+    InvitationRejected,
+    InvitationRevoked,
+    Invited,
+    Banned,
+    Unbanned,
+    Kicked,
+    ChangedName,
+    ChangedAvatar,
+    #[default]
+    NoChange,
+    ServerAcl,
+    ChangedPins,
+    MessageRemoved,
+    UnableToDecrypt,
+    HiddenEvent,
+    VirtualTimelineItem
+}
+
+impl From<MembershipChange> for SmallStateType {
+    fn from(change: MembershipChange) -> Self {
+        use matrix_sdk_ui::timeline::MembershipChange;
+        match change {
+            MembershipChange::Joined => SmallStateType::Joined,
+            MembershipChange::Left => SmallStateType::Left,
+            MembershipChange::Banned => SmallStateType::Banned,
+            MembershipChange::Unbanned => SmallStateType::Unbanned,
+            MembershipChange::Kicked => SmallStateType::Kicked,
+            MembershipChange::Invited => SmallStateType::Invited,
+            MembershipChange::KickedAndBanned => SmallStateType::Banned,
+            MembershipChange::InvitationAccepted => SmallStateType::Joined,
+            MembershipChange::InvitationRejected => SmallStateType::InvitationRejected,
+            MembershipChange::InvitationRevoked => SmallStateType::InvitationRevoked,
+            MembershipChange::Knocked => SmallStateType::HiddenEvent,
+            MembershipChange::KnockAccepted => SmallStateType::Joined,
+            MembershipChange::KnockRetracted => SmallStateType::HiddenEvent,
+            MembershipChange::None => SmallStateType::NoChange,
+            MembershipChange::Error => SmallStateType::NoChange,
+            MembershipChange::NotImplemented => SmallStateType::NoChange,
+            MembershipChange::KnockDenied => SmallStateType::HiddenEvent,
+        }
+    }
+}
+
+impl From<&AnyOtherFullStateEventContent> for SmallStateType {
+    fn from(content: &AnyOtherFullStateEventContent) -> Self {
+        match content {
+            AnyOtherFullStateEventContent::RoomServerAcl(_) => SmallStateType::ServerAcl,
+            AnyOtherFullStateEventContent::RoomCreate(_) => SmallStateType::CreateRoom,
+            AnyOtherFullStateEventContent::_Custom { .. } => SmallStateType::HiddenEvent,
+            // All other room state events are configuration changes
+            _ => SmallStateType::ConfigureRoom,
+        }
+    }
+}
+
+impl From<&TimelineItemContent> for SmallStateType {
+    fn from(content: &TimelineItemContent) -> Self {
+        use matrix_sdk_ui::timeline::TimelineItemContent;
+        match content {
+            TimelineItemContent::MembershipChange(change) => {
+                change.change()
+                    .map(SmallStateType::from)
+                    .unwrap_or_default()
+            }
+            TimelineItemContent::ProfileChange(change) => {
+                match (change.avatar_url_change(), change.displayname_change()) {
+                    (Some(_), _) => SmallStateType::ChangedAvatar,
+                    (None, Some(_)) => SmallStateType::ChangedName,
+                    _ => SmallStateType::NoChange,
+                }
+            }
+            TimelineItemContent::OtherState(other_state) => {
+                SmallStateType::from(other_state.content())
+            }
+            TimelineItemContent::MsgLike(MsgLikeContent { kind, .. }) => {
+                match kind {
+                    MsgLikeKind::Poll(_) => SmallStateType::NoChange,
+                    MsgLikeKind::Redacted => SmallStateType::MessageRemoved,
+                    MsgLikeKind::UnableToDecrypt(_) => SmallStateType::UnableToDecrypt,
+                    _ => SmallStateType::NoChange,
+                }
+            }
+            _ => SmallStateType::NoChange,
+        }
+    }
+}
+
+/// Condensed version of a `EventTimelineItem`, used for generating summaries.
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+pub struct UserEvent {
+    /// The transition type
+    pub transition: SmallStateType,
+    /// The index of the event in the timeline
+    pub index: usize,
+    /// The sender of the event
+    pub sender: Option<OwnedUserId>,
+    /// The display name of the sender
+    pub display_name: String,
+    /// The state key of the event
+    pub state_key: Option<String>,
+    /// The ID of the event
+    pub event_id: Option<OwnedEventId>,
+}
+
+impl SmallStateGroup {
+    /// Computes and caches the summary text and avatar user IDs for this group.
+    ///
+    /// This should be called whenever the group's user_events_map is modified.
+    pub fn update_cached_data(&mut self) {
+        // Cache the summary text
+        self.cached_summary = Some(generate_summary(&self.user_events_map, SUMMARY_LENGTH));
+
+        // Cache the avatar user IDs
+        self.cached_avatar_user_ids = Some(extract_avatar_user_ids(&self.user_events_map, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT));
+    }
+}
+
+/// Combines neighboring transitions into compound actions, e.g. [Joined, Left] -> [JoinedAndLeft]
+fn merge_adjacent_transitions(transitions: &[SmallStateType]) -> Vec<SmallStateType> {
+    let mut res = Vec::new();
+    let mut i = 0;
+    while i < transitions.len() {
+        let t = transitions[i];
+        if i + 1 < transitions.len() {
+            let t2 = transitions[i + 1];
+            match (t, t2) {
+                (SmallStateType::Joined, SmallStateType::Left) => {
+                    res.push(SmallStateType::JoinedAndLeft);
+                    i += 2;
+                    continue;
+                }
+                (SmallStateType::Left, SmallStateType::Joined) => {
+                    res.push(SmallStateType::LeftAndJoined);
+                    i += 2;
+                    continue;
+                }
+                _ => {}
+            }
+        }
+        res.push(t);
+        i += 1;
+    }
+    res
+}
+
+/// Groups consecutive identical transitions with their count (e.g. [JoinedAndLeft, JoinedAndLeft] -> (JoinedAndLeft, 2))
+fn group_repeated_transitions(transitions: &[SmallStateType]) -> Vec<(SmallStateType, usize)> {
+    let mut res = Vec::new();
+    for &t in transitions {
+        if let Some((last, count)) = res.last_mut() {
+            if *last == t {
+                *count += 1;
+                continue;
+            }
+        }
+        res.push((t, 1));
+    }
+    res
+}
+
+/// Creates human-readable text for a transition type with user count and repetition count
+fn format_transition_text(
+    transition: SmallStateType,
+    user_count: usize,
+    repeat_count: usize,
+) -> String {
+    let is_plural = user_count > 1;
+    match transition {
+        SmallStateType::CreateRoom => "created and configured the room".to_string(),
+        SmallStateType::ConfigureRoom => "".to_string(),
+        SmallStateType::Joined => {
+            if repeat_count > 1 {
+                if is_plural {
+                    format!("joined (×{})", repeat_count)
+                } else {
+                    format!("joined the room (×{})", repeat_count)
+                }
+            } else {
+                if is_plural {
+                    "joined".to_string()
+                } else {
+                    "joined the room".to_string()
+                }
+            }
+        }
+        SmallStateType::Left => {
+            if repeat_count > 1 {
+                if is_plural {
+                    format!("left (×{})", repeat_count)
+                } else {
+                    format!("left the room (×{})", repeat_count)
+                }
+            } else {
+                if is_plural {
+                    "left".to_string()
+                } else {
+                    "left the room".to_string()
+                }
+            }
+        }
+        SmallStateType::JoinedAndLeft => {
+            if repeat_count > 1 {
+                format!("joined and left (×{})", repeat_count)
+            } else {
+                "joined and left".to_string()
+            }
+        }
+        SmallStateType::LeftAndJoined => {
+            if repeat_count > 1 {
+                format!("left and rejoined (×{})", repeat_count)
+            } else {
+                "left and rejoined".to_string()
+            }
+        }
+        SmallStateType::ChangedName => {
+            if repeat_count > 1 {
+                format!("changed their name (×{})", repeat_count)
+            } else {
+                "changed their name".to_string()
+            }
+        }
+        SmallStateType::ChangedAvatar => {
+            if repeat_count > 1 {
+                format!("changed their profile picture (×{})", repeat_count)
+            } else {
+                "changed their profile picture".to_string()
+            }
+        }
+        SmallStateType::Invited => {
+            if repeat_count > 1 {
+                format!("was invited (×{})", repeat_count)
+            } else {
+                "was invited".to_string()
+            }
+        }
+        SmallStateType::Banned => {
+            if repeat_count > 1 {
+                format!("was banned (×{})", repeat_count)
+            } else {
+                "was banned".to_string()
+            }
+        }
+        SmallStateType::Unbanned => {
+            if repeat_count > 1 {
+                format!("was unbanned (×{})", repeat_count)
+            } else {
+                "was unbanned".to_string()
+            }
+        }
+        SmallStateType::InvitationRejected => {
+            if repeat_count > 1 {
+                format!("rejected invite (×{})", repeat_count)
+            } else {
+                "rejected invite".to_string()
+            }
+        }
+        SmallStateType::InvitationRevoked => {
+            if repeat_count > 1 {
+                format!("invite withdrawn (×{})", repeat_count)
+            } else {
+                "invite withdrawn".to_string()
+            }
+        }
+        SmallStateType::Kicked => {
+            if repeat_count > 1 {
+                format!("was kicked (×{})", repeat_count)
+            } else {
+                "was kicked".to_string()
+            }
+        }
+        SmallStateType::ServerAcl => {
+            if repeat_count > 1 {
+                format!("updated server ACLs (×{})", repeat_count)
+            } else {
+                "updated server ACLs".to_string()
+            }
+        }
+        SmallStateType::ChangedPins => {
+            if repeat_count > 1 {
+                format!("changed pinned messages (×{})", repeat_count)
+            } else {
+                "changed pinned messages".to_string()
+            }
+        }
+        SmallStateType::MessageRemoved => {
+            if repeat_count > 1 {
+                format!("removed a message (×{})", repeat_count)
+            } else {
+                "removed a message".to_string()
+            }
+        }
+        SmallStateType::HiddenEvent => {
+            if repeat_count > 1 {
+                format!("did a hidden event (×{})", repeat_count)
+            } else {
+                "did a hidden event".to_string()
+            }
+        }
+        SmallStateType::NoChange => {
+            if repeat_count > 1 {
+                format!("made no changes (×{})", repeat_count)
+            } else {
+                "made no changes".to_string()
+            }
+        }
+        SmallStateType::UnableToDecrypt => {
+            if repeat_count > 1 {
+                format!("decryption failed (×{})", repeat_count)
+            } else {
+                "decryption failed".to_string()
+            }
+        }
+        _ => "".to_string()
+    }
+}
+
+/// Produce an English-readable name list, with "and N others"
+fn format_user_list(user_names: &[String], max_display_count: usize) -> String {
+    match user_names.len() {
+        0 => "".into(),
+        1 => user_names[0].clone(),
+        2 => format!("{} and {}", user_names[0], user_names[1]),
+        3 => format!("{}, {}, and {}", user_names[0], user_names[1], user_names[2]),
+        n if n <= max_display_count => {
+            let all_but_last = &user_names[..n-1];
+            let last = &user_names[n-1];
+            format!("{}, and {}", all_but_last.join(", "), last)
+        },
+        n => format!(
+            "{}, and {} others",
+            user_names[..max_display_count].join(", "),
+            n - max_display_count
+        ),
+    }
+}
+
+/// Convert an event timeline item to a user event
+fn convert_event_timeline_item_to_user_event(
+    event_item: &EventTimelineItem,
+    index: usize,
+) -> UserEvent {
+    use matrix_sdk_ui::timeline::TimelineItemContent;
+    let state_key = match event_item.content() {
+        TimelineItemContent::MembershipChange(change) => {
+            Some(change.user_id().to_string())
+        }
+        TimelineItemContent::OtherState(other) => Some(other.state_key().to_string()),
+        _ => None,
+    };
+    let transition_type: SmallStateType = event_item.content().into();
+
+    UserEvent {
+        index,
+        display_name: event_item.sender().to_string(),
+        transition: transition_type,
+        sender: Some(event_item.sender().into()),
+        state_key,
+        event_id: event_item.event_id().map(|e|e.to_owned()),
+    }
+}
+
+/// Gets the effective user ID for a user event, preferring state_key over sender.
+/// This handles cases where the state_key represents the actual user being affected.
+fn get_effective_user_id(user_event: &UserEvent) -> Option<OwnedUserId> {
+    match user_event.state_key.as_ref().map(UserId::parse) {
+        Some(Ok(user_id)) => Some(user_id),
+        _ => user_event.sender.clone(),
+    }
+}
+
+/// Checks if a timeline item represents a small state change (membership change, profile change, poll, redacted, or unable to decrypt).
+///
+/// # Arguments
+/// * `timeline_item` - The timeline item to check
+///
+/// # Returns
+/// * `bool` - Whether this is a small state event
+fn is_small_state(timeline_item: Option<&Arc<TimelineItem>>) -> bool {
+    timeline_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(|e| {
+            matches!(e.content(), TimelineItemContent::MembershipChange(_) | TimelineItemContent::ProfileChange(_) |
+                TimelineItemContent::OtherState(_) | TimelineItemContent::MsgLike(MsgLikeContent { kind: MsgLikeKind::Poll(_) |
+                MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_), .. }))
+        })
+        .unwrap_or(false)
+}
+
+/// Extracts small state events from timeline items and converts them to UserEvents.
+///
+/// # Arguments
+/// * `timeline_items` - An iterator over timeline items to process
+///
+/// # Returns
+/// * `Vec<UserEvent>` - A vector of converted UserEvent objects from small state timeline items
+pub fn extract_small_state_events<I>(timeline_items: I) -> Vec<UserEvent>
+where
+    I: IntoIterator<Item = std::sync::Arc<matrix_sdk_ui::timeline::TimelineItem>>,
+    I::IntoIter: ExactSizeIterator,
+{
+    timeline_items
+        .into_iter()
+        .enumerate()
+        .filter_map(|(index, item)| {
+            if is_small_state(Some(&item)) {
+                if let matrix_sdk_ui::timeline::TimelineItemKind::Event(event_tl_item) = item.kind() {
+                    Some(convert_event_timeline_item_to_user_event(event_tl_item, index))
+                } else {
+                    None
+                }
+            } else {
+                if let matrix_sdk_ui::timeline::TimelineItemKind::Virtual(_) = item.kind() {
+                    Some(UserEvent {
+                            index,
+                            display_name: "".to_string(),
+                            transition: SmallStateType::VirtualTimelineItem,
+                            sender: None,
+                            state_key: None,
+                            event_id: None,
+                        })
+                } else {
+                    None
+                }
+            }
+        })
+        .collect()
+}
+
+/// Generates a summary string from user events.
+///
+/// # Arguments
+/// * `user_events` - A HashMap mapping user IDs to their list of UserEvents
+/// * `summary_length` - Maximum number of user names to display before coalescing
+/// # Returns
+/// * `String` - The generated summary string
+fn generate_summary(
+    user_events: &HashMap<OwnedUserId, Vec<UserEvent>>,
+    summary_length: usize,
+) -> String {
+    // Aggregate by transition sequence
+    let mut aggregates: Vec<(Vec<SmallStateType>, Vec<String>)> = Vec::new();
+
+    for (user_id, events) in user_events {
+        // Create sorted indices instead of cloning the entire events vector
+        let mut sorted_indices: Vec<usize> = (0..events.len()).collect();
+        sorted_indices.sort_by_key(|&i| events[i].index);
+        let mut transitions: Vec<_> = sorted_indices.iter().map(|&i| events[i].transition).collect();
+
+        // Filter out Joined transitions for room creators
+        if transitions.contains(&SmallStateType::CreateRoom) {
+            transitions.retain(|&t| t != SmallStateType::Joined);
+        }
+
+        let canonical = merge_adjacent_transitions(&transitions);
+        let name = if let Some(&first_idx) = sorted_indices.first() {
+            &events[first_idx].display_name
+        } else {
+            &user_id.to_string()
+        };
+
+        if let Some((_, names)) = aggregates.iter_mut().find(|(seq, _)| seq == &canonical) {
+            names.push(name.to_string());
+        } else {
+            aggregates.push((canonical, vec![name.to_string()]));
+        }
+    }
+
+    // Build text
+    let mut summary_parts = Vec::new();
+    for (canonical, names) in aggregates {
+        let coalesced = group_repeated_transitions(&canonical);
+
+        let descs: Vec<String> = coalesced
+            .into_iter()
+            .map(|(transition, repeat_count)| {
+                format_transition_text(transition, names.len(), repeat_count)
+            })
+            .collect();
+        let name_list = format_user_list(&names, summary_length);
+        let transition_text = descs.join(", ");
+        summary_parts.push(format!("{} {}", name_list, transition_text));
+    }
+
+    summary_parts.join(", ")
+}
+
+/// Extracts and sorts user IDs from user events map for avatar display.
+///
+/// This is the expensive computation part that should be cached.
+fn extract_avatar_user_ids(
+    user_events_map: &HashMap<OwnedUserId, Vec<UserEvent>>,
+    max_avatars: usize,
+) -> Vec<OwnedUserId> {
+    // Extract user IDs from the map, sorted by their first event index for consistency
+    let mut user_data: Vec<(OwnedUserId, usize)> = user_events_map
+        .iter()
+        .map(|(user_id, events)| {
+            let first_index = events.iter().map(|e| e.index).min().unwrap_or(0);
+            (user_id.clone(), first_index)
+        })
+        .collect();
+
+    // Sort by first event index to maintain chronological order
+    user_data.sort_by_key(|(_, first_index)| *first_index);
+
+    // Extract just the user IDs and limit to max_avatars
+    user_data
+        .into_iter()
+        .take(max_avatars)
+        .map(|(user_id, _)| user_id)
+        .collect()
+}
+
+/// Populates the avatar row with user avatars from pre-computed user IDs.
+pub fn populate_avatar_row_from_user_ids(
+    cx: &mut Cx,
+    avatar_row: &WidgetRef,
+    timeline_kind: &TimelineKind,
+    user_ids: &[OwnedUserId],
+) {
+    // Reuse read receipts logic to populate the avatar row.
+    let receipts_map: IndexMap<OwnedUserId, matrix_sdk::ruma::events::receipt::Receipt> = user_ids
+        .iter()
+        .map(|user_id| {
+            let receipt = matrix_sdk::ruma::events::receipt::Receipt::new(
+                matrix_sdk::ruma::MilliSecondsSinceUnixEpoch::now()
+            );
+            (user_id.clone(), receipt)
+        })
+        .collect();
+
+    avatar_row.avatar_row(cx, ids!(user_event_avatar_row)).set_avatar_row(cx, timeline_kind, None, &receipts_map);
+}
diff --git a/src/home/event_reaction_list.rs b/src/home/event_reaction_list.rs
index 94cd3741c..021036ed1 100644
--- a/src/home/event_reaction_list.rs
+++ b/src/home/event_reaction_list.rs
@@ -3,6 +3,7 @@ use crate::profile::user_profile_cache;
 use crate::sliding_sync::{current_user_id, submit_async_request, MatrixRequest, TimelineKind};
 use indexmap::IndexMap;
 use makepad_widgets::*;
+use crate::{ApplyOverCompat, LivePtr, widget_ref_from_live_ptr};
 use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
 use matrix_sdk_ui::timeline::{ReactionInfo, ReactionsByKeyBySender, TimelineEventItemId};
 
@@ -32,49 +33,47 @@ const EMOJI_BG_COLOR_NOT_INCLUDE_SELF: Vec4 = Vec4 {
     w: 1.0,
 }; // LightGrey
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
 
-    COLOR_BUTTON_GREY = #B6BABF
-    REACTION_LIST_PADDING_RIGHT = 30.0;
+    mod.widgets.COLOR_BUTTON_GREY = #B6BABF
+    mod.widgets.REACTION_LIST_PADDING_RIGHT = 30.0;
 
-    pub ReactionList = {{ReactionList}} {
+    mod.widgets.ReactionList = #(ReactionList::register_widget(vm)) {
         width: Fill,
         height: Fit,
-        flow: RightWrap,
-        margin: {top: 5.0}
-        padding:{
-            right: (REACTION_LIST_PADDING_RIGHT)
+        flow: Flow.Right{wrap: true},
+        margin: Inset{top: 5.0}
+        padding: Inset{
+            right: (mod.widgets.REACTION_LIST_PADDING_RIGHT)
         }
-        item: <Button> {
+        item: Button {
             width: Fit,
             height: Fit,
             padding: 6,
             // Use a zero margin on the left because we want the first reaction
             // to be flush with the left edge of the message text.
-            margin: { top: 3, bottom: 3, left: 0, right: 6 },
+            margin: Inset{ top: 3, bottom: 3, left: 0, right: 6 },
 
-            draw_bg: {
+            draw_bg +: {
                 // Anything that we apply over must be an `instance`,
                 // and their names must be distinct from the base Button type.
-                instance reaction_bg_color: (COLOR_BUTTON_GREY)
-                instance reaction_border_color: #001A11
+                reaction_bg_color: instance((mod.widgets.COLOR_BUTTON_GREY))
+                reaction_border_color: instance(#001A11)
                 // Override values from the base Button type.
                 color_hover: #fef65b
                 hover: 0.0
                 border_size: 1.5
                 border_radius: 3.0
 
-                fn get_color(self) -> vec4 {
+                get_color: fn() -> vec4 {
                     return mix(self.reaction_bg_color, mix(self.reaction_bg_color, self.color_hover, 0.2), self.hover)
                 }
 
-                fn pixel(self) -> vec4 {
-                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                pixel: fn() {
+                    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                     sdf.box(
                         self.border_size,
                         self.border_size,
@@ -89,10 +88,10 @@ live_design! {
                     return sdf.result;
                 }
             }
-            draw_text: {
-                text_style: <REGULAR_TEXT>{font_size: 9},
+            draw_text +: {
+                text_style: REGULAR_TEXT {font_size: 9},
                 color: #000000
-                fn get_color(self) -> vec4 {
+                get_color: fn() -> vec4 {
                     return self.color;
                 }
             }
@@ -112,7 +111,7 @@ pub struct ReactionData {
     pub room_id: OwnedRoomId,
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct ReactionList {
     #[redraw] #[rust] area: Area,
     #[live] item: Option<LivePtr>,
@@ -173,7 +172,7 @@ impl Widget for ReactionList {
                             reaction: reaction_data.reaction.clone(),
                         });
                         // update the reaction button before the timeline is updated
-                        let (bg_color, border_color) = if !reaction_data.includes_user {
+                        let (_bg_color, _border_color) = if !reaction_data.includes_user {
                             (EMOJI_BG_COLOR_INCLUDE_SELF, EMOJI_BORDER_COLOR_INCLUDE_SELF)
                         } else {
                             (EMOJI_BG_COLOR_NOT_INCLUDE_SELF, EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF)
@@ -200,13 +199,12 @@ impl ReactionList {
     fn do_hover_in(
         &self,
         cx: &mut Cx,
-        scope: &mut Scope,
+        _scope: &mut Scope,
         button_ref: &ButtonRef,
         reaction_data: ReactionData,
     ) {
         cx.widget_action(
-            self.widget_uid(),
-            &scope.path,
+            self.widget_uid(), 
             RoomScreenTooltipActions::HoverInReactionButton {
                 widget_rect: button_ref.area().rect(cx),
                 reaction_data,
@@ -220,10 +218,10 @@ impl ReactionList {
     fn do_hover_out(
         &self,
         cx: &mut Cx,
-        scope: &mut Scope,
+        _scope: &mut Scope,
         button_ref: &ButtonRef,
     ) {
-        cx.widget_action(self.widget_uid(), &scope.path, RoomScreenTooltipActions::HoverOut);
+        cx.widget_action(self.widget_uid(),  RoomScreenTooltipActions::HoverOut);
         button_ref.apply_over(cx, live!(draw_bg: {hover: 0.0}));
         cx.set_cursor(MouseCursor::Default);
     }
@@ -286,12 +284,12 @@ impl ReactionListRef {
                 reaction_senders: reaction_senders.clone(),
                 room_id: timeline_kind.room_id().clone(),
             };
-            let button = WidgetRef::new_from_ptr(cx, inner.item).as_button();
+            let button = widget_ref_from_live_ptr(cx, inner.item).as_button();
             button.set_text(cx, &format!("{}  {}",
                 reaction_data.reaction,
                 reaction_senders.len()
             ));
-            let (bg_color, border_color) = if reaction_data.includes_user {
+            let (_bg_color, _border_color) = if reaction_data.includes_user {
                 (EMOJI_BG_COLOR_INCLUDE_SELF, EMOJI_BORDER_COLOR_INCLUDE_SELF)
             } else {
                 (
diff --git a/src/home/event_source_modal.rs b/src/home/event_source_modal.rs
index 4aca433fd..6fdbc1b6a 100644
--- a/src/home/event_source_modal.rs
+++ b/src/home/event_source_modal.rs
@@ -7,156 +7,154 @@ use matrix_sdk::ruma::{OwnedEventId, OwnedRoomId};
 use crate::shared::popup_list::{PopupKind, enqueue_popup_notification};
 
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
-    use link::shaders::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use makepad_code_editor::code_view::CodeView;
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::RobrixIconButton;
+    use mod.widgets.CodeView
 
-    VIEW_SOURCE_MODAL_BORDER_RADIUS: 6.0
+    mod.widgets.VIEW_SOURCE_MODAL_BORDER_RADIUS = 6.0
 
     // A small icon button for copying content
-    CopyButton = <RobrixIconButton> {
+    mod.widgets.CopyButton = RobrixIconButton {
         width: Fit, height: Fit,
         padding: 8,
         spacing: 0
-        align: {x: 0.5, y: 0.5}
-        icon_walk: {width: 14, height: 14, margin: 0}
-        draw_icon: {
-            svg_file: (ICON_COPY),
+        align: Align{x: 0.5, y: 0.5}
+        icon_walk: Walk{width: 14, height: 14, margin: 0}
+        draw_icon +: {
+            svg: (ICON_COPY),
             color: #666
         }
-        draw_bg: {
+        draw_bg +: {
             border_size: 0,
-            color: #0000
+            color: instance(#0000)
         }
     }
 
     // A row showing a label + value + copy button
-    IdRow = <View> {
+    mod.widgets.IdRow = View {
         width: Fill, height: Fit,
         flow: Right,
-        align: {y: 0.5}
-        margin: {top: -1, bottom: -1}
+        align: Align{y: 0.5}
+        margin: Inset{top: -1, bottom: -1}
         padding: 0
 
-        label = <Label> {
+        label := Label {
             width: Fit, height: Fit,
-            draw_text: {
-                text_style: <REGULAR_TEXT>{font_size: 11},
+            draw_text +: {
+                text_style: REGULAR_TEXT {font_size: 11},
                 color: #666
             }
         }
-        value = <Label> {
+        value := Label {
             width: Fit, height: Fit,
-            draw_text: {
-                text_style: <THEME_FONT_CODE>{font_size: 10},
+            draw_text +: {
+                text_style: theme.font_code {font_size: 10},
                 color: #000
             }
         }
-        copy_button = <CopyButton> {
-            margin: {left: 4}
+            copy_button := mod.widgets.CopyButton {
+                margin: Inset{left: 4}
+            }
         }
-    }
 
-    pub EventSourceModal = {{EventSourceModal}}<RoundedView> {
+    mod.widgets.EventSourceModal = set_type_default() do #(EventSourceModal::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         width: Fill { max: 1000, min: 600 }
         // TODO: i'd like for this height to be Fit with a max of Rel { base: Full, factor: 0.90 },
         //       but Makepad doesn't allow Fit views with a max to be scrolled.
         height: Fill // { max: 1400 }
         margin: 40,
-        align: {x: 0.5, y: 0}
+        align: Align{x: 0.5, y: 0}
             
         flow: Down
-        padding: {top: 20, right: 25, bottom: 20, left: 25}
+        padding: Inset{top: 20, right: 25, bottom: 20, left: 25}
 
         // Make this a ScrollYView
-        scroll_bars: <ScrollBars> {
+        scroll_bars: ScrollBars {
             show_scroll_x: false, show_scroll_y: true,
-            scroll_bar_y: {drag_scrolling: true}
+            scroll_bar_y: ScrollBar {drag_scrolling: true}
         }
 
         show_bg: true
-        draw_bg: {
-            color: (COLOR_PRIMARY)
-            border_radius: (VIEW_SOURCE_MODAL_BORDER_RADIUS)
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY))
+            border_radius: (mod.widgets.VIEW_SOURCE_MODAL_BORDER_RADIUS)
             border_size: 0.0
         }
 
         // Title and close button (outside scroll so it stays visible)
-        title_view = <View> {
+        title_view := View {
             width: Fill, height: Fit,
             flow: Right,
-            align: {y: 0.5}
+            align: Align{y: 0.5}
 
-            title = <Label> {
+            title := Label {
                 width: Fill, height: Fit,
-                draw_text: {
-                    text_style: <TITLE_TEXT>{font_size: 16},
+                draw_text +: {
+                    text_style: TITLE_TEXT {font_size: 16},
                     color: #000
                 }
                 text: "View Event Source"
             }
 
-            close_button = <RobrixIconButton> {
+            close_button := RobrixIconButton {
                 width: Fit, height: Fit,
                 padding: 12,
                 spacing: 0
-                align: {x: 0.5, y: 0.5}
-                icon_walk: {width: 18, height: 18, margin: 0}
-                draw_icon: {
-                    svg_file: (ICON_CLOSE),
+                align: Align{x: 0.5, y: 0.5}
+                icon_walk: Walk{width: 18, height: 18, margin: 0}
+                draw_icon +: {
+                    svg: (ICON_CLOSE),
                     color: #666
                 }
-                draw_bg: {
+                draw_bg +: {
                     border_size: 0,
-                    color: #0000
+                    color: instance(#0000)
                 }
             }
         }
 
         // Room ID row
-        room_id_row = <IdRow> {
-            label = { text: "Room ID:" }
-            value = { text: "" }
+        room_id_row := mod.widgets.IdRow {
+            label: { text: "Room ID:" }
+            value: { text: "" }
         }
 
         // Event ID row
-        event_id_row = <IdRow> {
-            label = { text: "Event ID:" }
-            value = { text: "" }
+        event_id_row := mod.widgets.IdRow {
+            label: { text: "Event ID:" }
+            value: { text: "" }
         }
 
-        <LineH> {
+        LineH {
             height: 1
             margin: 3
         }
 
         // Original event source section header
-        source_header = <View> {
+        source_header := View {
             width: Fill, height: Fit,
             flow: Right,
-            align: {y: 0.5}
-            padding: {top: 3, left: 3, right: 6}
+            align: Align{y: 0.5}
+            padding: Inset{top: 3, left: 3, right: 6}
 
-            source_label = <Label> {
+            source_label := Label {
                 width: Fill, height: Fit,
-                draw_text: {
-                    text_style: <TITLE_TEXT>{font_size: 13},
+                draw_text +: {
+                    text_style: TITLE_TEXT {font_size: 13},
                     color: #000
                 }
                 text: "Original event source"
             }
 
-            copy_source_button = <CopyButton> {}
+            copy_source_button := mod.widgets.CopyButton {}
         }
 
         // An overlay view that draws a border frame around the code view.
-        code_block = <View> {
+        code_block := View {
             width: Fill,
             height: Fit,
             flow: Overlay 
@@ -164,51 +162,30 @@ live_design! {
             padding: 6
 
             // The code editor content (drawn first, behind the overlay)
-            code_view = <CodeView>{
-                editor: {
+            code_view := CodeView {
+                editor +: {
                     margin: 12,
                     width: Fill,
                     height: Fit,
-                    draw_bg: { color: (COLOR_PRIMARY) }
-                    draw_text: { text_style: { font_size: 11 } }
-
-                    // Light mode syntax highlighting (inspired by GitHub Light / VS Code Light+)
-                    token_colors: {
-                        whitespace: #x6a737d,         // Gray for whitespace markers
-                        delimiter: #x24292e,          // Dark gray for punctuation
-                        delimiter_highlight: #x005cc5, // Blue for highlighted delimiters
-                        error_decoration: #xcb2431,   // Red for errors
-                        warning_decoration: #xb08800, // Dark yellow/amber for warnings
-
-                        unknown: #x24292e,            // Default dark text
-                        branch_keyword: #xd73a49,     // Red/pink for keywords (if, else, match)
-                        constant: #x005cc5,           // Blue for constants
-                        identifier: #x24292e,         // Dark gray for variables
-                        loop_keyword: #xd73a49,       // Red/pink for loop keywords
-                        number: #x005cc5,             // Blue for numbers
-                        other_keyword: #xd73a49,      // Red/pink for other keywords
-                        punctuator: #x24292e,         // Dark gray for punctuation
-                        string: #x22863a,             // Green for strings
-                        function: #x6f42c1,           // Purple for functions
-                        typename: #xe36209,           // Orange for types
-                        comment: #x6a737d,            // Gray for comments
-                    }
+                    draw_bg.color: (COLOR_PRIMARY)
+                    draw_text +: { text_style: theme.font_regular { font_size: 11 } }
+
                 }
             }
 
             // Border overlay frame (drawn on top of content)
             // Only draws the stroke, fill is transparent
-            border_frame = <View> {
+            border_frame := SolidView {
                 width: Fill,
                 height: Fill,
                 show_bg: true
-                draw_bg: {
-                    uniform border_radius: (VIEW_SOURCE_MODAL_BORDER_RADIUS)
-                    uniform border_size: 1.25
-                    uniform border_color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    border_radius: uniform((mod.widgets.VIEW_SOURCE_MODAL_BORDER_RADIUS))
+                    border_size: uniform(1.25)
+                    border_color: uniform((COLOR_SECONDARY))
 
-                    fn pixel(self) -> vec4 {
-                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                    pixel: fn() {
+                        let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                         
                         // Draw rounded box - but only the stroke, no fill
                         sdf.box(
@@ -232,7 +209,7 @@ live_design! {
         }
 
         // just some extra space at the bottom
-        <View> {
+        View {
             width: Fill, height: 25
         }
     }
@@ -252,7 +229,7 @@ pub enum EventSourceModalAction {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct EventSourceModal {
     #[deref] view: View,
     #[rust] room_id: Option<OwnedRoomId>,
@@ -273,7 +250,7 @@ impl Widget for EventSourceModal {
 
 impl WidgetMatchEvent for EventSourceModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let close_button = self.view.button(ids!(close_button));
+        let close_button = self.view.button(cx, ids!(close_button));
 
         // Handle canceling/closing the modal.
         let close_clicked = close_button.clicked(actions);
@@ -289,7 +266,7 @@ impl WidgetMatchEvent for EventSourceModal {
             return;
         }
 
-        if self.view.button(ids!(room_id_row.copy_button)).clicked(actions) {
+        if self.view.button(cx, ids!(room_id_row.copy_button)).clicked(actions) {
             if let Some(room_id) = &self.room_id {
                 cx.copy_to_clipboard(room_id.as_str());
                 enqueue_popup_notification(
@@ -300,7 +277,7 @@ impl WidgetMatchEvent for EventSourceModal {
             }
         }
 
-        if self.view.button(ids!(event_id_row.copy_button)).clicked(actions) {
+        if self.view.button(cx, ids!(event_id_row.copy_button)).clicked(actions) {
             if let Some(event_id) = &self.event_id {
                 cx.copy_to_clipboard(event_id.as_str());
                 enqueue_popup_notification(
@@ -311,7 +288,7 @@ impl WidgetMatchEvent for EventSourceModal {
             }
         }
 
-        if self.view.button(ids!(copy_source_button)).clicked(actions) {
+        if self.view.button(cx, ids!(copy_source_button)).clicked(actions) {
             if let Some(json) = &self.original_json {
                 cx.copy_to_clipboard(json);
                 enqueue_popup_notification(
@@ -337,21 +314,21 @@ impl EventSourceModal {
         self.event_id = event_id.clone();
         self.original_json = original_json.clone();
 
-        self.view.label(ids!(room_id_row.value)).set_text(cx, room_id.as_str());
-        self.view.label(ids!(event_id_row.value)).set_text(
+        self.view.label(cx, ids!(room_id_row.value)).set_text(cx, room_id.as_str());
+        self.view.label(cx, ids!(event_id_row.value)).set_text(
             cx,
             event_id.as_ref().map(|e| e.as_str()).unwrap_or("<Event ID Unknown>"),
         );
 
-        self.view.code_view(ids!(code_view)).set_text(
+        self.view.code_view(cx, ids!(code_view)).set_text(
             cx,
             original_json.as_deref().unwrap_or("<Unable to load event source JSON>"),
         );
 
-        self.view.button(ids!(close_button)).reset_hover(cx);
-        self.view.button(ids!(room_id_row.copy_button)).reset_hover(cx);
-        self.view.button(ids!(event_id_row.copy_button)).reset_hover(cx);
-        self.view.button(ids!(copy_source_button)).reset_hover(cx);
+        self.view.button(cx, ids!(close_button)).reset_hover(cx);
+        self.view.button(cx, ids!(room_id_row.copy_button)).reset_hover(cx);
+        self.view.button(cx, ids!(event_id_row.copy_button)).reset_hover(cx);
+        self.view.button(cx, ids!(copy_source_button)).reset_hover(cx);
         self.view.redraw(cx);
     }
 }
diff --git a/src/home/home_screen.rs b/src/home/home_screen.rs
index 9c723e77e..4b0d5be55 100644
--- a/src/home/home_screen.rs
+++ b/src/home/home_screen.rs
@@ -2,39 +2,30 @@ use makepad_widgets::*;
 
 use crate::{app::AppState, home::navigation_tab_bar::{NavigationBarAction, SelectedTab}, settings::settings_screen::SettingsScreenWidgetRefExt};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::home::main_mobile_ui::MainMobileUI;
-    use crate::home::rooms_sidebar::RoomsSideBar;
-    use crate::home::navigation_tab_bar::NavigationTabBar;
-    use crate::home::search_messages::*;
-    use crate::home::spaces_bar::*;
-    use crate::home::add_room::*;
-    use crate::shared::styles::*;
-    use crate::shared::room_filter_input_bar::RoomFilterInputBar;
-    use crate::home::main_desktop_ui::MainDesktopUI;
-    use crate::settings::settings_screen::SettingsScreen;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
 
     // Defines the total height of the StackNavigationView's header.
     // This has to be set in multiple places because of how StackNavigation
     // uses an Overlay view internally.
-    STACK_VIEW_HEADER_HEIGHT = 75
+    mod.widgets.STACK_VIEW_HEADER_HEIGHT = 75
 
-    StackNavigationWrapper = {{StackNavigationWrapper}} {
-        view_stack = <StackNavigation> {}
+    mod.widgets.StackNavigationWrapper = #(StackNavigationWrapper::register_widget(vm)) {
+        view_stack := StackNavigation {}
     }
 
     // A wrapper view around the SpacesBar that lets us show/hide it via animation.
-    SpacesBarWrapper = {{SpacesBarWrapper}}<RoundedShadowView> {
+    mod.widgets.SpacesBarWrapper = set_type_default() do #(SpacesBarWrapper::register_widget(vm)) {
+        ..mod.widgets.RoundedShadowView
+
         width: Fill,
         height: (NAVIGATION_TAB_BAR_SIZE)
-        margin: {left: 4, right: 4}
+        margin: Inset{left: 4, right: 4}
         show_bg: true
-        draw_bg: {
-            color: (COLOR_PRIMARY_DARKER),
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY_DARKER)),
             border_radius: 4.0,
             border_size: 0.0
             shadow_color: #0005
@@ -42,19 +33,19 @@ live_design! {
             shadow_offset: vec2(1.0, 0.0),
         }
 
-        <CachedWidget> {
-            root_spaces_bar = <SpacesBar> {}
+        CachedWidget {
+            root_spaces_bar := mod.widgets.SpacesBar {}
         }
 
-        animator: {
-            spaces_bar_animator = {
-                default: hide,
-                show = {
-                    from: { all: Forward { duration: (SPACES_BAR_ANIMATION_DURATION_SECS) } }
+        animator: Animator{
+            spaces_bar_animator: {
+                default: @hide
+                show: AnimatorState{
+                    from: { all: Forward { duration: (mod.widgets.SPACES_BAR_ANIMATION_DURATION_SECS) } }
                     apply: { height: (NAVIGATION_TAB_BAR_SIZE),  draw_bg: { shadow_color: #x00000055 } }
                 }
-                hide = {
-                    from: { all: Forward { duration: (SPACES_BAR_ANIMATION_DURATION_SECS) } }
+                hide: AnimatorState{
+                    from: { all: Forward { duration: (mod.widgets.SPACES_BAR_ANIMATION_DURATION_SECS) } }
                     apply: { height: 0,  draw_bg: { shadow_color: #x00000000 } }
                 }
             }
@@ -64,136 +55,136 @@ live_design! {
     // The home screen widget contains the main content:
     // rooms list, room screens, and the settings screen as an overlay.
     // It adapts to both desktop and mobile layouts.
-    pub HomeScreen = {{HomeScreen}} {
-        <AdaptiveView> {
+    mod.widgets.HomeScreen = #(HomeScreen::register_widget(vm)) {
+        AdaptiveView {
             // NOTE: within each of these sub views, we used `CachedWidget` wrappers
             //       to ensure that there is only a single global instance of each
             //       of those widgets, which means they maintain their state
             //       across transitions between the Desktop and Mobile variant.
-            Desktop = {
+            Desktop := SolidView {
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_SECONDARY),
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY)),
                 }
                 width: Fill, height: Fill
                 flow: Right
-                align: {x: 0.0, y: 0.0}
+                align: Align{x: 0.0, y: 0.0}
                 padding: 0,
                 margin: 0,
 
                 // On the left, show the navigation tab bar vertically.
-                <CachedWidget> {
-                    navigation_tab_bar = <NavigationTabBar> {}
+                CachedWidget {
+                    navigation_tab_bar := mod.widgets.NavigationTabBar {}
                 }
 
                 // To the right of that, we use the PageFlip widget to show either
                 // the main desktop UI or the settings screen.
-                home_screen_page_flip = <PageFlip> {
+                home_screen_page_flip := PageFlip {
                     width: Fill, height: Fill
 
                     lazy_init: true,
-                    active_page: home_page
+                    active_page: @home_page
 
-                    home_page = <View> {
+                    home_page := View {
                         width: Fill, height: Fill
                         flow: Down
 
-                        <View> {
+                        View {
                             width: Fill,
                             height: 39,
                             flow: Right
-                            padding: {top: 2, bottom: 2}
-                            margin: {right: 2}
+                            padding: Inset{top: 2, bottom: 2}
+                            margin: Inset{right: 2}
                             spacing: 2
-                            align: {y: 0.5}
+                            align: Align{y: 0.5}
 
-                            <CachedWidget> {
-                                room_filter_input_bar = <RoomFilterInputBar> {}
+                            CachedWidget {
+                                room_filter_input_bar := RoomFilterInputBar {}
                             }
 
-                            search_messages_button = <SearchMessagesButton> {
+                            search_messages_button := SearchMessagesButton {
                                 // make this button match/align with the RoomFilterInputBar
                                 height: 32.5,
-                                margin: {right: 2}
+                                margin: Inset{right: 2}
                             }
                         }
 
-                        <MainDesktopUI> {}
+                        mod.widgets.MainDesktopUI {}
                     }
 
-                    settings_page = <View> {
+                    settings_page := SolidView {
                         width: Fill, height: Fill
                         show_bg: true,
-                        draw_bg: {
-                            color: (COLOR_PRIMARY)
+                        draw_bg +: {
+                            color: instance((COLOR_PRIMARY))
                         }
 
-                        <CachedWidget> {
-                            settings_screen = <SettingsScreen> {}
+                        CachedWidget {
+                            settings_screen := mod.widgets.SettingsScreen {}
                         }
                     }
 
-                    add_room_page = <View> {
+                    add_room_page := SolidView {
                         width: Fill, height: Fill
                         show_bg: true,
-                        draw_bg: {
-                            color: (COLOR_PRIMARY)
+                        draw_bg +: {
+                            color: instance((COLOR_PRIMARY))
                         }
 
-                        <CachedWidget> {
-                            add_room_screen = <AddRoomScreen> {}
+                        CachedWidget {
+                            add_room_screen := mod.widgets.AddRoomScreen {}
                         }
                     }
                 }
             }
 
-            Mobile = {
+            Mobile := SolidView {
                 width: Fill, height: Fill
                 flow: Down
 
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_PRIMARY)
+                draw_bg +: {
+                    color: instance((COLOR_PRIMARY))
                 }
 
-                <StackNavigationWrapper> {
-                    view_stack = <StackNavigation> {
-                        root_view = {
+                mod.widgets.StackNavigationWrapper {
+                    view_stack := StackNavigation {
+                        root_view: {
                             flow: Down
                             width: Fill, height: Fill
 
                             // At the top of the root view, we use the PageFlip widget to show either
                             // the main list of rooms or the settings screen.
-                            home_screen_page_flip = <PageFlip> {
+                            home_screen_page_flip := PageFlip {
                                 width: Fill, height: Fill
 
                                 lazy_init: true,
-                                active_page: home_page
+                                active_page: @home_page
 
-                                home_page = <View> {
+                                home_page := View {
                                     width: Fill, height: Fill
                                     // Note: while the other page views have top padding, we do NOT add that here
                                     // because it is added in the `RoomsSideBar`'s `RoundedShadowView` itself.
                                     flow: Down
 
-                                    <RoomsSideBar> {}
+                                    mod.widgets.RoomsSideBar {}
                                 }
 
-                                settings_page = <View> {
+                                settings_page := View {
                                     width: Fill, height: Fill
-                                    padding: {top: 20}
+                                    padding: Inset{top: 20}
 
-                                    <CachedWidget> {
-                                        settings_screen = <SettingsScreen> {}
+                                    CachedWidget {
+                                        settings_screen := mod.widgets.SettingsScreen {}
                                     }
                                 }
 
-                                add_room_page = <View> {
+                                add_room_page := View {
                                     width: Fill, height: Fill
-                                    padding: {top: 20}
+                                    padding: Inset{top: 20}
 
-                                    <CachedWidget> {
-                                        add_room_screen = <AddRoomScreen> {}
+                                    CachedWidget {
+                                        add_room_screen := mod.widgets.AddRoomScreen {}
                                     }
                                 }
                             }
@@ -204,145 +195,25 @@ live_design! {
                             // across AdaptiveView transitions between Mobile view mode and Desktop view mode.
                             // 
                             // ... Then we wrap *that* in a ... <https://www.youtube.com/watch?v=evUWersr7pc>
-                            <CachedWidget> {
-                                spaces_bar_wrapper = <SpacesBarWrapper> {}
+                            CachedWidget {
+                                spaces_bar_wrapper := mod.widgets.SpacesBarWrapper {}
                             }
 
                             // At the bottom of the root view, show the navigation tab bar horizontally.
-                            <CachedWidget> {
-                                navigation_tab_bar = <NavigationTabBar> {}
+                            CachedWidget {
+                                navigation_tab_bar := mod.widgets.NavigationTabBar {}
                             }
                         }
 
-                        main_content_view = <StackNavigationView> {
+                        main_content_view := StackNavigationView {
                             width: Fill, height: Fill
-                            header = {
-                                // The following shader stuff was copied from `RoundedShadowView`.
-                                // We can't directly use RoundedShadowView here for `header` because it is already
-                                // a special view, the `StackViewHeader`.
-                                clip_x:false,
-                                clip_y:false,
-                                                    
-                                show_bg: true,
-                                draw_bg: {
-                                    uniform color_dither: 1.0
-                                    uniform gradient_border_horizontal: 0.0; 
-                                    uniform gradient_fill_horizontal: 0.0; 
-
-                                    color: (COLOR_PRIMARY_DARKER)
-                                    uniform color_2: vec4(-1.0, -1.0, -1.0, -1.0)
-
-                                    uniform border_radius: 4.0
-                                    uniform border_size: 0.0
-                                    uniform border_color: #0000
-                                    uniform border_color_2: vec4(-1.0, -1.0, -1.0, -1.0)
-
-                                    uniform shadow_color: #0005
-                                    uniform shadow_radius: 9.0,
-                                    uniform shadow_offset: vec2(1.0, 0.0)
-                                                                    
-                                    varying rect_size2: vec2,
-                                    varying rect_size3: vec2,
-                                    varying rect_pos2: vec2,     
-                                    varying rect_shift: vec2,    
-                                    varying sdf_rect_pos: vec2,
-                                    varying sdf_rect_size: vec2,
-                                                                    
-                                    fn vertex(self) -> vec4 {
-                                        let min_offset = min(self.shadow_offset,vec2(0));
-                                        self.rect_size2 = self.rect_size + 2.0*vec2(self.shadow_radius);
-                                        self.rect_size3 = self.rect_size2 + abs(self.shadow_offset);
-                                        self.rect_pos2 = self.rect_pos - vec2(self.shadow_radius) + min_offset;
-                                        self.sdf_rect_size = self.rect_size2 - vec2(self.shadow_radius * 2.0 + self.border_size * 2.0)
-                                        self.sdf_rect_pos = -min_offset + vec2(self.border_size + self.shadow_radius);
-                                        self.rect_shift = -min_offset;
-                                                                                    
-                                        return self.clip_and_transform_vertex(self.rect_pos2, self.rect_size3)
-                                    }
-                                                                                
-                                    fn pixel(self) -> vec4 {                                                
-                                        let sdf = Sdf2d::viewport(self.pos * self.rect_size3)
-                                        let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
-
-                                        let color_2 = self.color;
-                                        if (self.color_2.x > -0.5) {
-                                            color_2 = self.color_2;
-                                        }
-
-                                        let border_color_2 = self.border_color;
-                                        if (self.border_color_2.x > -0.5) {
-                                            border_color_2 = self.border_color_2;
-                                        }
-
-                                        let gradient_border_dir = self.pos.y + dither;
-                                        if (self.gradient_border_horizontal > 0.5) {
-                                            gradient_border_dir = self.pos.x + dither;
-                                        }
-
-                                        let gradient_fill_dir = self.pos.y + dither;
-                                        if (self.gradient_fill_horizontal > 0.5) {
-                                            gradient_fill_dir = self.pos.x + dither;
-                                        }
-
-                                        sdf.box(
-                                            self.sdf_rect_pos.x,
-                                            self.sdf_rect_pos.y,
-                                            self.sdf_rect_size.x,
-                                            self.sdf_rect_size.y, 
-                                            max(1.0, self.border_radius)
-                                        )
-                                        if sdf.shape > -1.0{ // try to skip the expensive gauss shadow
-                                            let m = self.shadow_radius;
-                                            let o = self.shadow_offset + self.rect_shift;
-                                            let v = GaussShadow::rounded_box_shadow(vec2(m) + o, self.rect_size2+o, self.pos * (self.rect_size3+vec2(m)), self.shadow_radius*0.5, self.border_radius*2.0);
-                                            sdf.clear(self.shadow_color*v)
-                                        }
-                                                                                            
-                                        sdf.fill_keep(mix(self.color, color_2, gradient_fill_dir))
-
-                                        if self.border_size > 0.0 {
-                                            sdf.stroke(
-                                                mix(self.border_color, border_color_2, gradient_border_dir),
-                                                self.border_size)
-                                        }
-                                        return sdf.result
-                                    }
-                                }
-
-                                padding: {top: 30, bottom: 0}
-                                height: (STACK_VIEW_HEADER_HEIGHT),
-                                content = {
-                                    height: (STACK_VIEW_HEADER_HEIGHT)
-                                    button_container = {
-                                        padding: 0,
-                                        margin: 0
-                                        left_button = {
-                                            draw_bg: {
-                                                fn pixel(self) -> vec4 {
-                                                    return #FFFFFF00;
-                                                }
-                                            }
-                                            width: Fit, height: Fit,
-                                            padding: {left: 20, right: 23, top: 10, bottom: 10}
-                                            margin: {left: 8, right: 0, top: 0, bottom: 0}
-                                            icon_walk: {width: 13, height: Fit}
-                                            spacing: 0
-                                            text: ""
-                                        }
-                                    }
-                                    title_container = {
-                                        padding: {top: 8}
-                                        title = {
-                                            draw_text: {
-                                                color: (ROOM_NAME_TEXT_COLOR)
-                                            }
-                                        }
-                                    }
-                                }
+                            header := StackViewHeader {
+                                padding: Inset{top: 30, bottom: 0}
+                                height: (mod.widgets.STACK_VIEW_HEADER_HEIGHT),
                             }
-                            body = {
-                                margin: {top: (STACK_VIEW_HEADER_HEIGHT)}
-                                main_content = <MainMobileUI> {}
+                            body := View {
+                                margin: Inset{top: (mod.widgets.STACK_VIEW_HEADER_HEIGHT)}
+                                main_content := mod.widgets.MainMobileUI {}
                             }
                         }
                     }
@@ -354,8 +225,9 @@ live_design! {
 
 
 /// A simple wrapper around the SpacesBar that allows us to animate showing or hiding it.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct SpacesBarWrapper {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 }
@@ -393,7 +265,7 @@ impl SpacesBarWrapperRef {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct HomeScreen {
     #[deref] view: View,
 
@@ -448,7 +320,7 @@ impl Widget for HomeScreen {
                             cx.action(NavigationBarAction::TabSelected(app_state.selected_tab.clone()));
                             if let Some(settings_page) = self.update_active_page_from_selection(cx, app_state) {
                                 settings_page
-                                    .settings_screen(ids!(settings_screen))
+                                    .settings_screen(cx, ids!(settings_screen))
                                     .populate(cx, None);
                                 self.view.redraw(cx);
                             } else {
@@ -466,7 +338,7 @@ impl Widget for HomeScreen {
                     }
                     Some(NavigationBarAction::ToggleSpacesBar) => {
                         self.is_spaces_bar_shown = !self.is_spaces_bar_shown;
-                        self.view.spaces_bar_wrapper(ids!(spaces_bar_wrapper))
+                        self.view.spaces_bar_wrapper(cx, ids!(spaces_bar_wrapper))
                             .show_or_hide(cx, self.is_spaces_bar_shown);
                     }
                     // We're the ones who emitted this action, so we don't need to handle it again.
@@ -498,7 +370,7 @@ impl HomeScreen {
         app_state: &mut AppState,
     ) -> Option<WidgetRef> {
         self.view
-            .page_flip(ids!(home_screen_page_flip))
+            .page_flip(cx, ids!(home_screen_page_flip))
             .set_active_page(
                 cx,
                 match app_state.selected_tab {
@@ -513,7 +385,7 @@ impl HomeScreen {
 
 /// A wrapper around the StackNavigation widget
 /// that simply forwards stack view actions to it.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct StackNavigationWrapper {
     #[deref] view: View,
 }
@@ -530,7 +402,7 @@ impl Widget for StackNavigationWrapper {
 
 impl MatchEvent for StackNavigationWrapper {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        self.stack_navigation(ids!(view_stack))
+        self.stack_navigation(cx, ids!(view_stack))
             .handle_stack_view_actions(cx, actions);
     }
 }
diff --git a/src/home/invite_modal.rs b/src/home/invite_modal.rs
index 39e7abedd..429eea700 100644
--- a/src/home/invite_modal.rs
+++ b/src/home/invite_modal.rs
@@ -1,152 +1,149 @@
 //! A modal dialog for inviting a user to a room.
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 use ruma::OwnedUserId;
 
 use crate::home::room_screen::InviteResultAction;
-use crate::shared::styles::*;
 use crate::sliding_sync::{MatrixRequest, submit_async_request};
 use crate::utils::RoomNameId;
 
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub InviteModal = {{InviteModal}} {
+    mod.widgets.InviteModal = #(InviteModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        <RoundedView> {
+        RoundedView {
             width: 400
             height: Fit
-            align: {x: 0.5}
+            align: Align{x: 0.5}
             flow: Down
-            padding: {top: 30, right: 25, bottom: 20, left: 25}
+            padding: Inset{top: 30, right: 25, bottom: 20, left: 25}
 
             show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_PRIMARY))
                 border_radius: 4.0
             }
 
-            title_view = <View> {
+            title_view := View {
                 width: Fill,
                 height: Fit,
-                padding: {top: 0, bottom: 25}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 25}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
+                title := Label {
                     width: Fill
                     height: Fit
-                    align: {x: 0.5}
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                    align: Align{x: 0.5}
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                     text: "Invite to Room"
                 }
             }
 
-            user_id_input = <SimpleTextInput> {
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{font_size: 11},
+            user_id_input := SimpleTextInput {
+                draw_text +: {
+                    text_style: REGULAR_TEXT {font_size: 11},
                     color: #000
                 }
                 empty_text: "@user:example.org",
             }
 
-            <View> {
+            View {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: {top: 20, bottom: 10}
-                align: {x: 1.0, y: 0.5}
+                padding: Inset{top: 20, bottom: 10}
+                align: Align{x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button = <RobrixIconButton> {
+                cancel_button := RobrixIconButton {
                     width: 120,
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 12,
-                    draw_icon: {
-                        svg_file: (ICON_FORBIDDEN)
+                    draw_icon +: {
+                        svg: (ICON_FORBIDDEN)
                         color: (COLOR_TEXT),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
+                    draw_bg +: {
                         border_size: 0.75
-                        border_color: (COLOR_BG_DISABLED),
-                        color: (COLOR_SECONDARY)
+                        border_color: instance((COLOR_BG_DISABLED)),
+                        color: instance((COLOR_SECONDARY))
                     }
                     text: "Cancel"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_TEXT),
                     }
                 }
 
-                confirm_button = <RobrixIconButton> {
+                confirm_button := RobrixIconButton {
                     width: 120
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 12,
-                    draw_icon: {
-                        svg_file: (ICON_ADD_USER)
+                    draw_icon +: {
+                        svg: (ICON_ADD_USER)
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
+                    draw_bg +: {
                         border_size: 0.75
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: (COLOR_BG_ACCEPT_GREEN)
+                        border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                        color: instance((COLOR_BG_ACCEPT_GREEN))
                     }
                     text: "Invite"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
                 }
 
-                okay_button = <RobrixIconButton> {
+                okay_button := RobrixIconButton {
                     visible: false
                     width: 120
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 12,
-                    draw_icon: {
-                        svg_file: (ICON_CHECKMARK)
+                    draw_icon +: {
+                        svg: (ICON_CHECKMARK)
                         color: (COLOR_PRIMARY),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
-                        color: (COLOR_ACTIVE_PRIMARY)
+                    draw_bg +: {
+                        color: instance((COLOR_ACTIVE_PRIMARY))
                     }
                     text: "Okay"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_PRIMARY),
                     }
                 }
             }
 
-            status_label_view = <View> {
+            status_label_view := View {
                 visible: false
                 width: Fill,
                 height: Fit,
-                align: {x: 0.5, y: 0.0}
+                align: Align{x: 0.5, y: 0.0}
 
-                status_label = <Label> {
+                status_label := Label {
                     width: Fill,
                     height: Fit,
-                    flow: RightWrap,
-                    align: {x: 0.5, y: 0.0}
-                    margin: {top: 10}
-                    draw_text: {
-                        wrap: Word
-                        text_style: <REGULAR_TEXT>{font_size: 11},
+                    flow: Flow.Right{wrap: true},
+                    align: Align{x: 0.5, y: 0.0}
+                    margin: Inset{top: 10}
+                    draw_text +: {
+                        flow: Flow.Right{wrap: true}
+                        text_style: REGULAR_TEXT {font_size: 11},
                         color: #000
                     }
                     text: ""
@@ -179,7 +176,7 @@ enum InviteModalState {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct InviteModal {
     #[deref] view: View,
     #[rust] state: InviteModalState,
@@ -199,7 +196,7 @@ impl Widget for InviteModal {
 
 impl WidgetMatchEvent for InviteModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let cancel_button = self.view.button(ids!(cancel_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -216,16 +213,16 @@ impl WidgetMatchEvent for InviteModal {
         }
 
         // Handle the okay button (shown after invite success).
-        let okay_button = self.view.button(ids!(okay_button));
+        let okay_button = self.view.button(cx, ids!(okay_button));
         if okay_button.clicked(actions) {
             cx.action(InviteModalAction::Close);
             return;
         }
 
-        let confirm_button = self.view.button(ids!(confirm_button));
-        let user_id_input = self.view.text_input(ids!(user_id_input));
-        let status_view = self.view.view(ids!(status_label_view));
-        let status_label_view = self.view.label(ids!(status_label_view.status_label));
+        let confirm_button = self.view.button(cx, ids!(confirm_button));
+        let user_id_input = self.view.text_input(cx, ids!(user_id_input));
+        let status_view = self.view.view(cx, ids!(status_label_view));
+        let status_label_view = self.view.label(cx, ids!(status_label_view.status_label));
 
         // Handle return key or invite button click.
         if let Some(user_id_str) = confirm_button.clicked(actions)
@@ -287,7 +284,7 @@ impl WidgetMatchEvent for InviteModal {
                         if self.room_name_id.as_ref().is_some_and(|rni| rni.room_id() == room_id)
                             && invited_user_id == user_id
                     => {
-                        let status = format!("Successfully invited {user_id}!");
+                        let _status = format!("Successfully invited {user_id}!");
                         status_label_view.apply_over(cx, live!{
                             text: (status),
                             draw_text: {
@@ -304,7 +301,7 @@ impl WidgetMatchEvent for InviteModal {
                         if self.room_name_id.as_ref().is_some_and(|rni| rni.room_id() == room_id)
                             && invited_user_id == user_id
                     => {
-                        let status = format!("Failed to send invite: {error}");
+                        let _status = format!("Failed to send invite: {error}");
                         status_label_view.apply_over(cx, live!{
                             text: (status),
                             draw_text: {
@@ -331,7 +328,7 @@ impl WidgetMatchEvent for InviteModal {
 
 impl InviteModal {
     pub fn show(&mut self, cx: &mut Cx, room_name_id: RoomNameId) {
-        self.view.label(ids!(title)).set_text(
+        self.view.label(cx, ids!(title)).set_text(
             cx,
             &format!("Invite to {room_name_id}"),
         );
@@ -339,10 +336,10 @@ impl InviteModal {
         self.room_name_id = Some(room_name_id);
 
         // Reset the UI state
-        let confirm_button = self.view.button(ids!(confirm_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
-        let okay_button = self.view.button(ids!(okay_button));
-        let user_id_input = self.view.text_input(ids!(user_id_input));
+        let confirm_button = self.view.button(cx, ids!(confirm_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let okay_button = self.view.button(cx, ids!(okay_button));
+        let user_id_input = self.view.text_input(cx, ids!(user_id_input));
         confirm_button.set_visible(cx, true);
         confirm_button.set_enabled(cx, true);
         confirm_button.reset_hover(cx);
@@ -353,8 +350,8 @@ impl InviteModal {
         okay_button.reset_hover(cx);
         user_id_input.set_is_read_only(cx, false);
         user_id_input.set_text(cx, "");
-        self.view.view(ids!(status_label_view)).set_visible(cx, false);
-        self.view.label(ids!(status_label_view.status_label)).set_text(cx, "");
+        self.view.view(cx, ids!(status_label_view)).set_visible(cx, false);
+        self.view.label(cx, ids!(status_label_view.status_label)).set_text(cx, "");
         self.view.redraw(cx);
     }
 }
diff --git a/src/home/invite_screen.rs b/src/home/invite_screen.rs
index ee1b3bed9..ab550f039 100644
--- a/src/home/invite_screen.rs
+++ b/src/home/invite_screen.rs
@@ -13,195 +13,199 @@ use crate::{app::AppStateAction, home::rooms_list::RoomsListRef, join_leave_room
 use super::rooms_list::{InviteState, InviterInfo};
 
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
-    use crate::shared::restore_status_view::*;
-
-    pub InviteScreen = {{InviteScreen}}<ScrollXYView> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.InviteScreen = set_type_default() do #(InviteScreen::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill,
         height: Fill,
         flow: Down,
-        align: {x: 0.5, y: 0}
-        padding: {left: 20, right: 20, top: 50}
+        align: Align{x: 0.5, y: 0}
+        padding: Inset{left: 20, right: 20, top: 50}
         spacing: 0,
 
         show_bg: true,
-        draw_bg: {
-            color: (COLOR_PRIMARY_DARKER),
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY_DARKER)),
         }
-        restore_status_view = <RestoreStatusView> {}
+        restore_status_view := RestoreStatusView {}
 
         // This view is only shown if `inviter` is Some.
-        inviter_view = <View> {
+        inviter_view := View {
             width: Fill, height: Fit
-            align: {x: 0.5, y: 0}
+            align: Align{x: 0.5, y: 0}
             spacing: 10,
             flow: Down,
 
 
-            inviter_avatar = <Avatar> {
+            inviter_avatar := Avatar {
                 width: 30,
                 height: 30,
-                text_view = { text = { draw_text: {
-                    text_style: <TITLE_TEXT>{ font_size: 10.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: TITLE_TEXT { font_size: 10.0 }
+                        }
+                    }
+                }
             }
 
 
-            inviter_name = <Label> {
+            inviter_name := Label {
                 width: Fill, height: Fit,
-                align: {x: 0.5, y: 0},
-                margin: {top: 2}
+                align: Align{x: 0.5, y: 0},
+                margin: Inset{top: 2}
                 padding: 0,
-                flow: RightWrap,
+                flow: Flow.Right{wrap: true},
                 text: ""
-                draw_text: {
-                    text_style: <TITLE_TEXT>{
+                draw_text +: {
+                    text_style: TITLE_TEXT {
                         font_size: 15,
                     },
                     color: #000
-                    wrap: Word
+                    flow: Flow.Right{wrap: true}
                 }
             }
 
-            inviter_user_id = <Label> {
+            inviter_user_id := Label {
                 width: Fill, height: Fit,
-                align: {x: 0.5, y: 0},
-                margin: {top: -3},
-                flow: RightWrap,
+                align: Align{x: 0.5, y: 0},
+                margin: Inset{top: -3},
+                flow: Flow.Right{wrap: true},
                 text: ""
-                draw_text: {
-                    text_style: <TITLE_TEXT>{
+                draw_text +: {
+                    text_style: TITLE_TEXT {
                         font_size: 10,
                     },
                     color: #888
-                    wrap: Word,
+                    flow: Flow.Right{wrap: true},
                 }
             }
 
-            <LineH> {
+            LineH {
                 width: 240,
-                draw_bg: {
-                    color: (COLOR_DIVIDER),
+                draw_bg +: {
+                    color: instance((COLOR_DIVIDER)),
                 }
             }
         }
 
-        invite_message = <Label> {
-            margin: {top: 15, bottom: 15},
+        invite_message := Label {
+            margin: Inset{top: 15, bottom: 15},
             width: Fill, height: Fit,
-            align: {x: 0.5, y: 0},
-            flow: RightWrap,
+            align: Align{x: 0.5, y: 0},
+            flow: Flow.Right{wrap: true},
             text: "",
-            draw_text: {
-                text_style: <REGULAR_TEXT>{
+            draw_text +: {
+                text_style: REGULAR_TEXT {
                     font_size: 15,
                 },
                 color: #000
-                wrap: Word
+                flow: Flow.Right{wrap: true}
             }
         }
 
-        room_view = <View> {
+        room_view := View {
             width: Fill, height: Fit
-            align: {x: 0.5, y: 0}
+            align: Align{x: 0.5, y: 0}
             spacing: 10,
             flow: Down,
 
-            room_avatar = <Avatar> {
+            room_avatar := Avatar {
                 width: 40,
                 height: 40,
 
-                text_view = { text = { draw_text: {
-                    text_style: <TITLE_TEXT>{ font_size: 13.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: TITLE_TEXT { font_size: 13.0 }
+                        }
+                    }
+                }
             }
 
-            room_name = <Label> {
+            room_name := Label {
                 width: Fill, height: Fit,
-                align: {x: 0.5, y: 0},
+                align: Align{x: 0.5, y: 0},
                 text: ""
-                // margin: {top: 3}
-                flow: RightWrap,
-                draw_text: {
-                    text_style: <TITLE_TEXT>{
+                // margin: Inset{top: 3}
+                flow: Flow.Right{wrap: true},
+                draw_text +: {
+                    text_style: TITLE_TEXT {
                         font_size: 18,
                     },
                     color: #000
-                    wrap: Word,
+                    flow: Flow.Right{wrap: true},
                 }
             }
         }
 
-        buttons = <View> {
+        buttons := View {
             width: Fill, height: Fit
             // We'd like to use RightWrap, but it doesn't work with x-centered alignment
-            // flow: RightWrap,
+            // flow: Flow.Right{wrap: true},
             flow: Right,
-            align: {x: 0.5, y: 0.5}
-            margin: {top: 20}
+            align: Align{x: 0.5, y: 0.5}
+            margin: Inset{top: 20}
             spacing: 40
 
-            cancel_button = <RobrixIconButton> {
-                align: {x: 0.5, y: 0.5}
+            cancel_button := RobrixIconButton {
+                align: Align{x: 0.5, y: 0.5}
                 padding: 15,
-                draw_icon: {
-                    svg_file: (ICON_FORBIDDEN)
+                draw_icon +: {
+                    svg: (ICON_FORBIDDEN)
                     color: (COLOR_FG_DANGER_RED),
                 }
-                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                 }
                 text: "Reject Invite"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
             }
 
-            accept_button = <RobrixIconButton> {
-                align: {x: 0.5, y: 0.5}
+            accept_button := RobrixIconButton {
+                align: Align{x: 0.5, y: 0.5}
                 padding: 15,
-                draw_icon: {
-                    svg_file: (ICON_CHECKMARK)
+                draw_icon +: {
+                    svg: (ICON_CHECKMARK)
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
-                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                draw_bg: {
-                    border_color: (COLOR_FG_ACCEPT_GREEN),
-                    color: (COLOR_BG_ACCEPT_GREEN)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                    color: instance((COLOR_BG_ACCEPT_GREEN))
                 }
                 text: "Join Room"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
             }
         }
 
-        completion_label = <Label> {
+        completion_label := Label {
             width: Fill, height: Fit,
-            align: {x: 0.5, y: 0},
-            margin: {top: 10, bottom: 10},
-            flow: RightWrap,
-            draw_text: {
+            align: Align{x: 0.5, y: 0},
+            margin: Inset{top: 10, bottom: 10},
+            flow: Flow.Right{wrap: true},
+            draw_text +: {
                 color: (COLOR_FG_ACCEPT_GREEN),
-                text_style: <THEME_FONT_BOLD>{font_size: 12}
-                wrap: Word,
+                text_style: theme.font_bold {font_size: 12}
+                flow: Flow.Right{wrap: true},
             }
             text: ""
         }
 
-        <View> {
+        View {
             width: Fill, height: 30,
         }
     }
@@ -254,7 +258,7 @@ pub enum LeaveRoomResultAction {
 
 
 /// A view that shows information about a room that the user has been invited to.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct InviteScreen {
     #[deref] view: View,
 
@@ -306,7 +310,7 @@ impl Widget for InviteScreen {
             }
 
             let Some(info) = self.info.as_ref() else { return; };
-            if let Some(modifiers) = self.view.button(ids!(cancel_button)).clicked_modifiers(actions) {
+            if let Some(modifiers) = self.view.button(cx, ids!(cancel_button)).clicked_modifiers(actions) {
                 self.invite_state = InviteState::WaitingForLeaveResult;
                 if modifiers.shift {
                     submit_async_request(MatrixRequest::LeaveRoom {
@@ -321,7 +325,7 @@ impl Widget for InviteScreen {
                     self.has_shown_confirmation = true;
                 }
             }
-            if let Some(modifiers) = self.view.button(ids!(accept_button)).clicked_modifiers(actions) {
+            if let Some(modifiers) = self.view.button(cx, ids!(accept_button)).clicked_modifiers(actions) {
                 self.invite_state = InviteState::WaitingForJoinResult;
                 if modifiers.shift {
                     submit_async_request(MatrixRequest::JoinRoom {
@@ -394,7 +398,7 @@ impl Widget for InviteScreen {
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         if !self.is_loaded {
-            let mut restore_status_view = self.view.restore_status_view(ids!(restore_status_view));
+            let mut restore_status_view = self.view.restore_status_view(cx, ids!(restore_status_view));
             if let Some(room_name) = &self.room_name_id {
                 restore_status_view.set_content(cx, self.all_rooms_loaded, room_name);
             }
@@ -406,9 +410,9 @@ impl Widget for InviteScreen {
         };
 
         // First, populate the inviter info, if we have it.
-        let inviter_view = self.view.view(ids!(inviter_view));
+        let inviter_view = self.view.view(cx, ids!(inviter_view));
         let (is_visible, invite_text) = if let Some(inviter) = info.inviter.as_ref() {
-            let inviter_avatar = inviter_view.avatar(ids!(inviter_avatar));
+            let inviter_avatar = inviter_view.avatar(cx, ids!(inviter_avatar));
             let mut drew_avatar = false;
             if let Some(avatar_bytes) = inviter.avatar.as_ref() {
                 drew_avatar = inviter_avatar.show_image(
@@ -425,8 +429,8 @@ impl Widget for InviteScreen {
                     inviter.display_name.as_deref().unwrap_or_else(|| inviter.user_id.as_str()),
                 );
             }
-            let inviter_name = inviter_view.label(ids!(inviter_name));
-            let inviter_user_id = inviter_view.label(ids!(inviter_user_id));
+            let inviter_name = inviter_view.label(cx, ids!(inviter_name));
+            let inviter_user_id = inviter_view.label(cx, ids!(inviter_user_id));
             if let Some(inviter_user_name) = inviter.display_name.as_deref() {
                 // If we have an inviter display name, show that *and* the user ID.
                 inviter_name.set_text(cx, inviter_user_name);
@@ -445,11 +449,11 @@ impl Widget for InviteScreen {
             (false, "You have been invited to join:")
         };
         inviter_view.set_visible(cx, is_visible);
-        self.view.label(ids!(invite_message)).set_text(cx, invite_text);
+        self.view.label(cx, ids!(invite_message)).set_text(cx, invite_text);
 
         // Second, populate the room info, if we have it.
-        let room_view = self.view.view(ids!(room_view));
-        let room_avatar = room_view.avatar(ids!(room_avatar));
+        let room_view = self.view.view(cx, ids!(room_view));
+        let room_avatar = room_view.avatar(cx, ids!(room_avatar));
         match &info.room_avatar() {
             FetchedRoomAvatar::Text(text) => {
                 room_avatar.show_text(
@@ -468,11 +472,11 @@ impl Widget for InviteScreen {
             }
         }
         let invite_room_label = info.room_name_id().to_string();
-        room_view.label(ids!(room_name)).set_text(cx, &invite_room_label);
+        room_view.label(cx, ids!(room_name)).set_text(cx, &invite_room_label);
 
         // Third, set the buttons' text based on the invite state.
-        let cancel_button = self.view.button(ids!(cancel_button));
-        let accept_button = self.view.button(ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let accept_button = self.view.button(cx, ids!(accept_button));
         match self.invite_state {
             InviteState::WaitingOnUserInput => {
                 cancel_button.set_enabled(cx, true);
@@ -501,7 +505,7 @@ impl Widget for InviteScreen {
             InviteState::RoomLeft => {
                 cancel_button.set_visible(cx, false);
                 accept_button.set_visible(cx, false);
-                self.view.label(ids!(completion_label)).set_text(
+                self.view.label(cx, ids!(completion_label)).set_text(
                     cx,
                     "Invite successfully rejected. You may close this invite.",
                 );
@@ -534,7 +538,7 @@ impl InviteScreen {
             self.redraw(cx);
         }
 
-        let restore_status_view = self.view.restore_status_view(ids!(restore_status_view));
+        let restore_status_view = self.view.restore_status_view(cx, ids!(restore_status_view));
         if !self.is_loaded {
             restore_status_view.set_content(
                 cx,
diff --git a/src/home/light_themed_dock.rs b/src/home/light_themed_dock.rs
index f9c6f8cdb..9a6757e61 100644
--- a/src/home/light_themed_dock.rs
+++ b/src/home/light_themed_dock.rs
@@ -1,27 +1,25 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
 
-    COLOR_TAB_BAR = (COLOR_PRIMARY * 0.96)
-    COLOR_DOCK_TAB = #E1EEFA // a light blue-ish color, de-saturated from `COLOR_ACTIVE_PRIMARY`
-    COLOR_DRAG_TARGET = (COLOR_ACTIVE_PRIMARY)
+    mod.widgets.COLOR_TAB_BAR = (COLOR_PRIMARY * 0.96)
+    mod.widgets.COLOR_DOCK_TAB = #E1EEFA // a light blue-ish color, de-saturated from `COLOR_ACTIVE_PRIMARY`
+    mod.widgets.COLOR_DRAG_TARGET = (COLOR_ACTIVE_PRIMARY)
 
-    pub Splitter = <SplitterBase> {
-        draw_bg: {
-            uniform border_radius: 1.0
-            uniform splitter_pad: 1.0
-            uniform splitter_grabber: 110.0
+    mod.widgets.Splitter = SplitterBase {
+        draw_bg +: {
+            border_radius: uniform(1.0)
+            splitter_pad: uniform(1.0)
+            splitter_grabber: uniform(110.0)
 
-            instance down: 0.0
-            instance hover: 0.0
+            down: instance(0.0)
+            hover: instance(0.0)
 
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 sdf.clear(COLOR_SECONDARY);
 
                 sdf.box(
@@ -64,32 +62,32 @@ live_design! {
         max_vertical: (THEME_SPLITTER_MAX_VERTICAL)
 
         animator: {
-            hover = {
+            hover: {
                 default: off
-                off = {
+                off: {
                     from: {all: Forward {duration: 0.1}}
                     apply: {
-                        draw_bg: {down: 0.0, hover: 0.0}
+                        draw_bg +: {down: 0.0, hover: 0.0}
                     }
                 }
 
-                on = {
+                on: {
                     from: {
                         all: Forward {duration: 0.1}
                         state_down: Forward {duration: 0.01}
                     }
                     apply: {
-                        draw_bg: {
+                        draw_bg +: {
                             down: 0.0,
                             hover: [{time: 0.0, value: 1.0}],
                         }
                     }
                 }
 
-                drag = {
+                drag: {
                     from: { all: Forward { duration: 0.1 }}
                     apply: {
-                        draw_bg: {
+                        draw_bg +: {
                             down: [{time: 0.0, value: 1.0}],
                             hover: 1.0,
                         }
@@ -99,16 +97,16 @@ live_design! {
         }
     }
 
-    pub TabCloseButton = <TabCloseButtonBase> {
+    mod.widgets.TabCloseButton = TabCloseButtonBase {
         height: 10.0, width: 10.0,
-        margin: { right: (THEME_SPACE_2), left: -1 },
-        draw_button: {
+        margin: Inset{ right: (THEME_SPACE_2), left: -1 },
+        draw_button +: {
 
-            instance hover: float;
-            instance active: float;
+            hover: instance(float;)
+            active: instance(float;)
 
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 let mid = self.rect_size / 2.0;
                 let size = (self.hover * 0.25 + 0.5) * 0.25 * length(self.rect_size);
                 let min = mid - vec2(size);
@@ -126,38 +124,38 @@ live_design! {
         }
 
         animator: {
-            hover = {
+            hover: {
                 default: off
-                off = {
+                off: {
                     from: {all: Forward {duration: 0.1}}
                     apply: {
-                        draw_button: {hover: 0.0}
+                        draw_button +: {hover: 0.0}
                     }
                 }
 
-                on = {
-                    cursor: Hand,
+                on: {
+                    cursor: MouseCursor.Hand,
                     from: {all: Snap}
                     apply: {
-                        draw_button: {hover: 1.0}
+                        draw_button +: {hover: 1.0}
                     }
                 }
             }
         }
     }
 
-    pub Tab = <TabBase> {
+    mod.widgets.Tab = TabBase {
         width: Fit, height: Fill, //Fixed((THEME_TAB_HEIGHT)),
 
-        align: {x: 0.0, y: 0.5}
-        padding: <THEME_MSPACE_3> { }
+        align: Align{x: 0.0, y: 0.5}
+        padding: 9
 
-        close_button: <TabCloseButton> {}
-        draw_text: {
-            text_style: <THEME_FONT_REGULAR> {}
-            instance hover: 0.0
-            instance active: 0.0
-            fn get_color(self) -> vec4 {
+        close_button: TabCloseButton {}
+        draw_text +: {
+            text_style: theme.font_regular {}
+            hover: instance(0.0)
+            active: instance(0.0)
+            get_color: fn() -> vec4 {
                 return mix(
                     mix(
                         #x0, // THEME_COLOR_TEXT_INACTIVE,
@@ -170,12 +168,12 @@ live_design! {
             }
         }
 
-        draw_bg: {
-            instance hover: float
-            instance active: float
+        draw_bg +: {
+            hover: instance(float)
+            active: instance(float)
 
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 sdf.box(
                     -1.,
                     -1.,
@@ -195,86 +193,86 @@ live_design! {
         }
 
         animator: {
-            hover = {
+            hover: {
                 default: off
-                off = {
+                off: {
                     from: {all: Forward {duration: 0.2}}
                     apply: {
-                        draw_bg: {hover: 0.0}
-                        draw_text: {hover: 0.0}
+                        draw_bg +: {hover: 0.0}
+                        draw_text +: {hover: 0.0}
                     }
                 }
 
-                on = {
-                    cursor: Hand,
+                on: {
+                    cursor: MouseCursor.Hand,
                     from: {all: Forward {duration: 0.1}}
                     apply: {
-                        draw_bg: {hover: [{time: 0.0, value: 1.0}]}
-                        draw_text: {hover: [{time: 0.0, value: 1.0}]}
+                        draw_bg +: {hover: [{time: 0.0, value: 1.0}]}
+                        draw_text +: {hover: [{time: 0.0, value: 1.0}]}
                     }
                 }
             }
 
-            active = {
+            active: {
                 default: off
-                off = {
+                off: {
                     from: {all: Forward {duration: 0.3}}
                     apply: {
-                        close_button: {draw_button: {active: 0.0}}
-                        draw_bg: {active: 0.0}
-                        draw_text: {active: 0.0}
+                        close_button: {draw_button +: {active: 0.0}}
+                        draw_bg +: {active: 0.0}
+                        draw_text +: {active: 0.0}
                     }
                 }
 
-                on = {
+                on: {
                     from: {all: Snap}
                     apply: {
-                        close_button: {draw_button: {active: 1.0}}
-                        draw_bg: {active: 1.0}
-                        draw_text: {active: 1.0}
+                        close_button: {draw_button +: {active: 1.0}}
+                        draw_bg +: {active: 1.0}
+                        draw_text +: {active: 1.0}
                     }
                 }
             }
         }
     }
 
-    pub TabBar = <TabBarBase> {
-        CloseableTab = <Tab> {closeable:true}
-        PermanentTab = <Tab> {closeable:false}
+    mod.widgets.TabBar = TabBarBase {
+        CloseableTab := Tab {closeable:true}
+        PermanentTab := Tab {closeable:false}
 
-        draw_drag: {
+        draw_drag +: {
             draw_depth: 10
             color: #x0
         }
-        draw_fill: {
+        draw_fill +: {
             color: (COLOR_TAB_BAR)
         }
 
         width: Fill, height: (THEME_TAB_HEIGHT)
 
-        scroll_bars: <ScrollBarsTabs> {
+        scroll_bars: ScrollBarsTabs {
             show_scroll_x: true
             show_scroll_y: false
             scroll_bar_x: {
-                draw_bg: {size: 3.0}
+                draw_bg +: {size: 3.0}
                 bar_size: 4
                 use_vertical_finger_scroll: true
             }
         }
     }
 
-    pub Dock = <DockBase> {
+    mod.widgets.Dock = DockBase {
         flow: Down,
 
         round_corner: {
             border_radius: 20.
-            fn pixel(self) -> vec4 {
+            pixel: fn() {
                 let pos = vec2(
                     mix(self.pos.x, 1.0 - self.pos.x, self.flip.x),
                     mix(self.pos.y, 1.0 - self.pos.y, self.flip.y)
                 )
 
-                let sdf = Sdf2d::viewport(pos * self.rect_size);
+                let sdf = Sdf2d.viewport(pos * self.rect_size);
                 sdf.rect(-10., -10., self.rect_size.x * 2.0, self.rect_size.y * 2.0);
                 sdf.box(
                     0.25,
@@ -290,12 +288,12 @@ live_design! {
             }
         }
 
-        padding: {left: (THEME_DOCK_BORDER_SIZE), top: 0, right: (THEME_DOCK_BORDER_SIZE), bottom: (THEME_DOCK_BORDER_SIZE)}
+        padding: Inset{left: (THEME_DOCK_BORDER_SIZE), top: 0, right: (THEME_DOCK_BORDER_SIZE), bottom: (THEME_DOCK_BORDER_SIZE)}
         drag_target_preview: {
             draw_depth: 10.0
             color: (mix((COLOR_DRAG_TARGET), #FFFFFF00, pow(0.5, THEME_COLOR_CONTRAST)))
         }
-        tab_bar: <TabBar> {}
-        splitter: <Splitter> {}
+        tab_bar: TabBar {}
+        splitter: Splitter {}
     }
 }
diff --git a/src/home/link_preview.rs b/src/home/link_preview.rs
index b01501255..b93171165 100644
--- a/src/home/link_preview.rs
+++ b/src/home/link_preview.rs
@@ -7,6 +7,7 @@ use std::{
 };
 
 use makepad_widgets::*;
+use crate::{ApplyOverCompat, LivePtr, widget_ref_from_live_ptr};
 use matrix_sdk::ruma::{events::room::{ImageInfo, MediaSource}, OwnedMxcUri, UInt};
 use serde::Deserialize;
 use url::Url;
@@ -14,10 +15,7 @@ use url::Url;
 use crate::{
     home::room_screen::TimelineUpdate,
     media_cache::MediaCache,
-    shared::{
-        styles::{COLOR_BG_PREVIEW, COLOR_BG_PREVIEW_HOVER},
-        text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
-    },
+    shared::text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
     sliding_sync::{submit_async_request, MatrixRequest, UrlPreviewError},
 };
 
@@ -56,112 +54,107 @@ pub enum LinkPreviewCacheEntry {
     Failed(LinkPreviewError),
 }
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
-    use crate::shared::text_or_image::TextOrImage;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    pub MESSAGE_TEXT_STYLE = <THEME_FONT_REGULAR>{
+    mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE = theme.font_regular {
         font_size: (16),
         line_spacing: (1.2),
     }
 
-    DEFAULT_IMAGE = dep("crate://self/resources/img/default_image.png")
-
-    pub LinkPreview = {{LinkPreview}} {
+    mod.widgets.LinkPreview = #(LinkPreview::register_widget(vm)) {
         width: Fill, height: Fit,
         flow: Down,
 
-        collapsible_button = <View> {
+        collapsible_button := View {
             width: Fill, height: Fit,
             flow: Right,
-            align: {x: 0.5, y: 0.5},
-            padding: {top: 4},
+            align: Align{x: 0.5, y: 0.5},
+            padding: Inset{top: 4},
             visible: false,
-            expand_collapse_button = <Button> {
-                width: Fit, height: Fit,
-                padding: {top: 2, bottom: 2, left: 8, right: 8},
-                draw_text: {
-                    text_style: <MESSAGE_TEXT_STYLE> {
-                        font_size: 10.0,
-                    },
-                    color: #666666,
-                }
+                expand_collapse_button := Button {
+                    width: Fit, height: Fit,
+                    padding: Inset{top: 2, bottom: 2, left: 8, right: 8},
+                    draw_text +: {
+                        text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
+                            font_size: 10.0,
+                        },
+                        color: #666666,
+                    }
                 text: "▼ Show more links"
             }
         }
 
-        item_template: <RoundedView> {
-            cursor: Hand,
+        item_template: RoundedView {
+            cursor: MouseCursor.Hand,
             flow: Right,
             spacing: 4.0,
             width: Fill, height: Fit,
-            margin: { top: 7 }
-            padding: { top: 8, bottom: 8, left: 12, right: 12 },
+            margin: Inset{ top: 7 }
+            padding: Inset{ top: 8, bottom: 8, left: 12, right: 12 },
             spacing: 10
             show_bg: true,
-            draw_bg: {
-                color: (COLOR_BG_PREVIEW),
+            draw_bg +: {
+                color: instance((COLOR_BG_PREVIEW)),
                 border_radius: 4.0
             }
-            align: { y: 0.5 }
+            align: Align{ y: 0.5 }
 
-            image_view = <View> {
+            image_view := View {
                 visible: true,
                 width: Fit, height: 80,
                 flow: Down
-                image = <TextOrImage> {
+                image := TextOrImage {
                     width: 120, height: Fill,
-                    align: { y: 0.5 }
+                    align: Align{ y: 0.5 }
                 }
             }
 
-            content_view = <View> {
+            content_view := View {
                 width: Fill, height: Fill,
                 flow: Down,
 
-                <View> {
+                View {
                     width: Fit, height: Fit,
-                    flow: RightWrap,
+                    flow: Flow.Right{wrap: true},
 
-                    title_label = <LinkLabel> {
+                    title_label := LinkLabel {
                         width: Fit, height: Fit,
-                        draw_text: {
-                            text_style: <MESSAGE_TEXT_STYLE> {
+                        draw_text +: {
+                            text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
                                 font_size: 12.0,
                             },
                             color: #x0000EE,
-                            wrap: Word,
-                            uniform color_hover: (COLOR_LINK_HOVER),
+                            flow: Flow.Right{wrap: true},
+                            color_hover: uniform((COLOR_LINK_HOVER)),
                         }
                     }
 
-                    site_name_label = <Label> {
+                    site_name_label := Label {
                         width: Fit, height: Fit,
-                        draw_text: {
-                            text_style: <MESSAGE_TEXT_STYLE> {
+                        draw_text +: {
+                            text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
                                 font_size: 12.0,
                             },
                             color: #666666,
-                            wrap: Word,
+                            flow: Flow.Right{wrap: true},
                         }
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit,
 
-                    description_label = <Label> {
+                    description_label := Label {
                         width: Fill, height: Fit,
-                        padding: { left: 0.0 }
-                        draw_text: {
-                            text_style: <MESSAGE_TEXT_STYLE> {
+                        padding: Inset{ left: 0.0 }
+                        draw_text +: {
+                            text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
                                 font_size: 11.0,
                             },
                             color: #666666,
-                            wrap: Word,
+                            flow: Flow.Right{wrap: true},
                         }
                     }
                 }
@@ -170,7 +163,7 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct LinkPreview {
     #[deref]
     view: View,
@@ -192,7 +185,7 @@ impl Widget for LinkPreview {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         // Handle collapsible button clicks
         if let Event::Actions(actions) = event {
-            let expand_button = self.view.button(ids!(collapsible_button.expand_collapse_button));
+            let expand_button = self.view.button(cx, ids!(collapsible_button.expand_collapse_button));
             if expand_button.clicked(actions) {
                 self.is_expanded = !self.is_expanded;
                 self.update_button_and_visibility(cx);
@@ -204,25 +197,24 @@ impl Widget for LinkPreview {
             match event.hits(cx, view.area()) {
                 Hit::FingerHoverIn(_) | Hit::FingerDown(_) => {
                     view.apply_over(cx, live! {
-                        draw_bg: { color: (COLOR_BG_PREVIEW_HOVER) }
+                        draw_bg: { color: instance((COLOR_BG_PREVIEW_HOVER))}
                     });
                 }
                 Hit::FingerHoverOut(_) => {
                     view.apply_over(cx, live! {
-                        draw_bg: { color: (COLOR_BG_PREVIEW) }
+                        draw_bg: { color: instance((COLOR_BG_PREVIEW))}
                     });
                 }
                 Hit::FingerUp(fe) => {
                     // return to normal bg color
                     view.apply_over(cx, live! {
-                        draw_bg: { color: (COLOR_BG_PREVIEW) }
+                        draw_bg: { color: instance((COLOR_BG_PREVIEW))}
                     });
                     if fe.is_over && fe.is_primary_hit() && fe.was_tap() {
-                        if let Some(html_link) = view.link_label(ids!(content_view.title_label)).borrow() {
+                        if let Some(html_link) = view.link_label(cx, ids!(content_view.title_label)).borrow() {
                             if !html_link.url.is_empty() {
                                 cx.widget_action(
-                                    html_link.widget_uid(),
-                                    &scope.path,
+                                    html_link.widget_uid(), 
                                     HtmlLinkAction::Clicked {
                                         url: html_link.url.clone(),
                                         key_modifiers: fe.modifiers,
@@ -260,15 +252,15 @@ impl LinkPreview {
 
     fn update_button_and_visibility(&mut self, cx: &mut Cx) {
         if self.show_collapsible_button {
-            self.view.view(ids!(collapsible_button)).set_visible(cx, true);
-            let button_ref = self.view.button(ids!(collapsible_button.expand_collapse_button));
+            self.view.view(cx, ids!(collapsible_button)).set_visible(cx, true);
+            let button_ref = self.view.button(cx, ids!(collapsible_button.expand_collapse_button));
             if self.is_expanded {
                 button_ref.set_text(cx, "▲ Show fewer links");
             } else {
                 button_ref.set_text(cx, &format!("▼ Show {} more links", self.hidden_links_count));
             }
         } else {
-            self.view.view(ids!(collapsible_button)).set_visible(cx, false);
+            self.view.view(cx, ids!(collapsible_button)).set_visible(cx, false);
         }
     }
 }
@@ -302,9 +294,9 @@ impl LinkPreviewRef {
          if let Some(mut inner) = self.borrow_mut() {
             inner.show_collapsible_button = true;
             inner.hidden_links_count = hidden_count;
-            let button_ref = inner.view.button(ids!(collapsible_button.expand_collapse_button));
+            let button_ref = inner.view.button(cx, ids!(collapsible_button.expand_collapse_button));
             button_ref.set_text(cx, &format!("▼ Show {} more links", inner.hidden_links_count));
-            inner.view.view(ids!(collapsible_button)).set_visible(cx, true);
+            inner.view.view(cx, ids!(collapsible_button)).set_visible(cx, true);
         }
     }
 
@@ -321,15 +313,15 @@ impl LinkPreviewRef {
     where
         F: FnOnce(&mut Cx, &TextOrImageRef, Option<Box<ImageInfo>>, MediaSource, &str, &mut MediaCache) -> bool,
     {
-        let view_ref = WidgetRef::new_from_ptr(cx, self.item_template()).as_view();
+        let view_ref = widget_ref_from_live_ptr(cx, self.item_template()).as_view();
         let mut fully_drawn = true;
         // Set title and URL
-        let title_link = view_ref.link_label(ids!(content_view.title_label));
+        let title_link = view_ref.link_label(cx, ids!(content_view.title_label));
         title_link.set_text(cx, link.as_str());
         if let Some(mut title_link) = title_link.borrow_mut() {
             title_link.url = link.to_string();
         }
-        let text_or_image_ref = view_ref.text_or_image(ids!(image));
+        let text_or_image_ref = view_ref.text_or_image(cx, ids!(image));
         text_or_image_ref.show_default_image(cx);
         let link_preview_data = match link_preview_cache_entry {
             LinkPreviewCacheEntry::LoadedLinkPreview(link_preview_data) => link_preview_data,
@@ -348,8 +340,8 @@ impl LinkPreviewRef {
         // Set site name
         if let Some(site_name) = &link_preview_data.site_name {
             view_ref
-                .view(ids!(content_view))
-                .label(ids!(site_name_label))
+                .view(cx, ids!(content_view))
+                .label(cx, ids!(site_name_label))
                 .set_text(cx, site_name);
         }
 
@@ -363,8 +355,8 @@ impl LinkPreviewRef {
                 description
             };
             view_ref
-                .view(ids!(content_view))
-                .label(ids!(description_label))
+                .view(cx, ids!(content_view))
+                .label(cx, ids!(description_label))
                 .set_text(cx, &truncated_description);
         }
 
@@ -375,7 +367,7 @@ impl LinkPreviewRef {
             image_info.size = link_preview_data.image_size;
             let image_info_source = Some(Box::new(image_info));
             let owned_mxc_uri = OwnedMxcUri::from(image.clone());
-            let text_or_image_ref = view_ref.text_or_image(ids!(image));
+            let text_or_image_ref = view_ref.text_or_image(cx, ids!(image));
             let original_source = MediaSource::Plain(owned_mxc_uri);
             // Calls the closure with the image populate function
             fully_drawn = image_populate_fn(
@@ -651,4 +643,3 @@ fn insert_into_cache(
     }
     SignalToUI::set_ui_signal();
 }
-
diff --git a/src/home/loading_pane.rs b/src/home/loading_pane.rs
index 8ce99e26e..4dfc57c21 100644
--- a/src/home/loading_pane.rs
+++ b/src/home/loading_pane.rs
@@ -4,98 +4,91 @@ use matrix_sdk::ruma::OwnedEventId;
 use crate::sliding_sync::TimelineRequestSender;
 
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
-    pub LoadingPane = {{LoadingPane}} {
+    mod.widgets.LoadingPane = set_type_default() do #(LoadingPane::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        align: {x: 0.5, y: 0.5}
+        align: Align{x: 0.5, y: 0.5}
 
         show_bg: true
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                return vec4(0., 0., 0., 0.7)
-            }
-        }
+        draw_bg.color: #000000b2
 
-        main_content = <RoundedView> {
+        main_content := RoundedView {
             flow: Down
             width: 400
             height: Fit
-            padding: {top: 25, right: 30 bottom: 30 left: 45}
+            padding: Inset{top: 25, right: 30 bottom: 30 left: 45}
             spacing: 10
 
             show_bg: true
-            draw_bg: {
-                color: #fff
+            draw_bg +: {
+                color: instance(#fff)
                 border_radius: 3.0
             }
 
-            title_view = <View> {
+            title_view := View {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: {top: 0, bottom: 40}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 40}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
+                title := Label {
                     text: "Loading content..."
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
                     }
                 }
             }
 
-            body = <View> {
+            body := View {
                 width: Fill,
                 height: Fit, // TODO: ideally this would be a range, maybe like 300-500 px
                 flow: Down,
                 spacing: 40,
 
-                status = <Label> {
+                status := Label {
                     width: Fill,
                     height: Fit,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {
                             font_size: 11.5,
                         },
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Right,
-                    align: {x: 1.0, y: 0.5}
+                    align: Align{x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button = <RobrixIconButton> {
-                        align: {x: 0.5, y: 0.5}
+                    cancel_button := RobrixIconButton {
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15
-                        // draw_icon: {
-                        //     svg_file: (ICON_FORBIDDEN)
+                        // draw_icon +: {
+                        //     svg: (ICON_FORBIDDEN)
                         //     color: (COLOR_FG_DANGER_RED),
                         // }
-                        icon_walk: {width: 0, height: 0 }
+                        icon_walk: Walk{width: 0, height: 0 }
 
-                        draw_bg: {
-                            border_color: (COLOR_FG_DANGER_RED),
-                            color: (COLOR_BG_DANGER_RED)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_DANGER_RED)),
+                            color: instance((COLOR_BG_DANGER_RED))
                         }
                         text: "Cancel"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_DANGER_RED),
                         }
                     }
@@ -108,7 +101,7 @@ live_design! {
 
 
 /// The state of a LoadingPane: the possible tasks that it may be performing.
-#[derive(Clone, DefaultNone)]
+#[derive(Clone, Default)]
 pub enum LoadingPaneState {
     /// The room is being backwards paginated until the target event is reached.
     BackwardsPaginateUntilEvent {
@@ -123,11 +116,12 @@ pub enum LoadingPaneState {
     /// The loading pane is displaying an error message until the user closes it.
     Error(String),
     /// The LoadingPane is not doing anything and can be hidden.
+    #[default]
     None,
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct LoadingPane {
     #[deref] view: View,
     #[rust] state: LoadingPaneState,
@@ -174,7 +168,7 @@ impl Widget for LoadingPane {
         let close_pane = {
             matches!(
                 event,
-                Event::Actions(actions) if self.button(ids!(cancel_button)).clicked(actions)
+                Event::Actions(actions) if self.button(cx, ids!(cancel_button)).clicked(actions)
             )
             || event.back_pressed()
             || match event.hits_with_capture_overload(cx, area, true) {
@@ -185,7 +179,7 @@ impl Widget for LoadingPane {
                 }
                 Hit::FingerUp(fue) if fue.is_over => {
                     fue.mouse_button().is_some_and(|b| b.is_back())
-                    || !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
+                    || !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                 _ => false,
             }
@@ -224,7 +218,7 @@ impl LoadingPane {
     }
 
     pub fn set_state(&mut self, cx: &mut Cx, state: LoadingPaneState) {
-        let cancel_button = self.button(ids!(cancel_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
         match &state {
             LoadingPaneState::BackwardsPaginateUntilEvent {
                 target_event_id,
@@ -251,11 +245,11 @@ impl LoadingPane {
     }
 
     pub fn set_status(&mut self, cx: &mut Cx, status: &str) {
-        self.label(ids!(status)).set_text(cx, status);
+        self.label(cx, ids!(status)).set_text(cx, status);
     }
 
     pub fn set_title(&mut self, cx: &mut Cx, title: &str) {
-        self.label(ids!(title)).set_text(cx, title);
+        self.label(cx, ids!(title)).set_text(cx, title);
     }
 }
 
diff --git a/src/home/location_preview.rs b/src/home/location_preview.rs
index 65db5c6fd..33477698d 100644
--- a/src/home/location_preview.rs
+++ b/src/home/location_preview.rs
@@ -12,99 +12,96 @@ use robius_location::Coordinates;
 
 use crate::location::{get_latest_location, request_location_update, LocationAction, LocationRequest, LocationUpdate};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
-    pub LocationPreview = {{LocationPreview}}<RoundedView> {
+    mod.widgets.LocationPreview = set_type_default() do #(LocationPreview::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         visible: false
         width: Fill
         height: Fit
         flow: Down
         // to align this view just below the RoomInputBar's curved border
-        margin: {top: 1}
-        padding: {left: 12, top: 10, bottom: 10, right: 10}
+        margin: Inset{top: 1}
+        padding: Inset{left: 12, top: 10, bottom: 10, right: 10}
         spacing: 8
 
         show_bg: true,
-        draw_bg: {
-            color: (COLOR_BG_PREVIEW),
+        draw_bg +: {
+            color: instance((COLOR_BG_PREVIEW)),
             border_radius: 5.0,
             border_size: 2.0
         }
 
-        <Label> {
+        Label {
             width: Fill,
             height: Fit,
-            draw_text: {
-                wrap: Word,
+            draw_text +: {
+                flow: Flow.Right{wrap: true},
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: <MESSAGE_TEXT_STYLE>{ font_size: 10.0 },
+                text_style: MESSAGE_TEXT_STYLE { font_size: 10.0 },
             }
             text: "Send your location to this room?"
         }
 
-        location_label = <Label> {
+        location_label := Label {
             width: Fill,
             height: Fit,
-            align: {x: 0.0, y: 0.5},
-            padding: {left: 10, bottom: 7}
-            draw_text: {
-                wrap: Word,
+            align: Align{x: 0.0, y: 0.5},
+            padding: Inset{left: 10, bottom: 7}
+            draw_text +: {
+                flow: Flow.Right{wrap: true},
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: <MESSAGE_TEXT_STYLE>{},
+                text_style: MESSAGE_TEXT_STYLE {},
             }
             text: "➡ Fetching current location..."
         }
 
-        <View> {
+        View {
             width: Fill, height: Fit
-            flow: RightWrap,
-            align: {x: 0.0, y: 0.5}
+            flow: Flow.Right{wrap: true},
+            align: Align{x: 0.0, y: 0.5}
 
-            cancel_location_button = <RobrixIconButton> {
-                align: {x: 0.5, y: 0.5}
+            cancel_location_button := RobrixIconButton {
+                align: Align{x: 0.5, y: 0.5}
                 padding: 15,
-                margin: {right: 15}
-                draw_icon: {
-                    svg_file: (ICON_FORBIDDEN)
+                margin: Inset{right: 15}
+                draw_icon +: {
+                    svg: (ICON_FORBIDDEN)
                     color: (COLOR_FG_DANGER_RED),
                 }
-                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1, top: -1} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1, top: -1} }
 
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                 }
                 text: "Cancel"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
             }
 
-            send_location_button = <RobrixIconButton> {
+            send_location_button := RobrixIconButton {
                 // disabled by default; will be enabled upon receiving valid location update.
                 enabled: false,
-                align: {x: 0.5, y: 0.5}
+                align: Align{x: 0.5, y: 0.5}
                 padding: 15,
-                draw_icon: {
-                    svg_file: (ICON_SEND)
+                draw_icon +: {
+                    svg: (ICON_SEND)
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
-                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                draw_bg: {
-                    border_color: (COLOR_FG_ACCEPT_GREEN),
-                    color: (COLOR_BG_ACCEPT_GREEN)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                    color: instance((COLOR_BG_ACCEPT_GREEN))
                 }
                 text: "Yes"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
             }
@@ -113,7 +110,7 @@ live_design! {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 struct LocationPreview {
     #[deref] view: View,
     #[rust] coords: Option<Result<Coordinates, robius_location::Error>>,
@@ -129,13 +126,13 @@ impl Widget for LocationPreview {
                     Some(LocationAction::Update(LocationUpdate { coordinates, time })) => {
                         self.coords = Some(Ok(*coordinates));
                         self.timestamp = *time;
-                        self.button(ids!(send_location_button)).set_enabled(cx, true);
+                        self.button(cx, ids!(send_location_button)).set_enabled(cx, true);
                         needs_redraw = true;
                     }
                     Some(LocationAction::Error(e)) => {
                         self.coords = Some(Err(*e));
                         self.timestamp = None;
-                        self.button(ids!(send_location_button)).set_enabled(cx, false);
+                        self.button(cx, ids!(send_location_button)).set_enabled(cx, false);
                         needs_redraw = true;
                     }
                     _ => { }
@@ -146,7 +143,7 @@ impl Widget for LocationPreview {
             //       in the RoomScreen handle_event function.
 
             // Handle the cancel location button being clicked.
-            if self.button(ids!(cancel_location_button)).clicked(actions) {
+            if self.button(cx, ids!(cancel_location_button)).clicked(actions) {
                 self.clear();
                 needs_redraw = true;
             }
@@ -167,7 +164,7 @@ impl Widget for LocationPreview {
             Some(Err(e)) => format!("➡ Error getting location: {e:?}"),
             None => String::from("➡ Current location is not yet available."),
         };
-        self.label(ids!(location_label)).set_text(cx, &text);
+        self.label(cx, ids!(location_label)).set_text(cx, &text);
         self.view.draw_walk(cx, scope, walk)
     }
 }
diff --git a/src/home/main_desktop_ui.rs b/src/home/main_desktop_ui.rs
index 7a88771e3..229c8f12e 100644
--- a/src/home/main_desktop_ui.rs
+++ b/src/home/main_desktop_ui.rs
@@ -6,64 +6,67 @@ use std::{collections::HashMap, sync::Arc};
 use crate::{app::{AppState, AppStateAction, SavedDockState, SelectedRoom}, home::{navigation_tab_bar::{NavigationBarAction, SelectedTab}, rooms_list::RoomsListRef, space_lobby::SpaceLobbyScreenWidgetRefExt}, utils::RoomNameId};
 use super::{invite_screen::InviteScreenWidgetRefExt, room_screen::RoomScreenWidgetRefExt, rooms_list::RoomsListAction};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::home::light_themed_dock::*;
-    use crate::home::rooms_sidebar::RoomsSideBar;
-    use crate::home::welcome_screen::WelcomeScreen;
-    use crate::home::room_screen::RoomScreen;
-    use crate::home::invite_screen::InviteScreen;
-    use crate::home::space_lobby::SpaceLobbyScreen;
-
-    pub MainDesktopUI = {{MainDesktopUI}} {
-        dock = <Dock> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.MainDesktopUI = #(MainDesktopUI::register_widget(vm)) {
+        dock := Dock {
             width: Fill,
             height: Fill,
             padding: 0,
             spacing: 0,
             // Align the dock with the RoomFilterInputBar. Not sure why we need this...
-            margin: {left: 1.75}
+            margin: Inset{left: 1.75}
+
+            tab_bar +: {
+                CloseableTab := Tab { closeable: true }
+                PermanentTab := Tab { closeable: false }
+            }
 
 
-            root = Splitter {
-                axis: Horizontal,
-                align: FromA(300.0),
-                a: rooms_sidebar_tab,
-                b: main
+            root := DockSplitter{
+                axis: SplitterAxis.Horizontal
+                align: SplitterAlign.FromA(300.0)
+                a: @rooms_sidebar_tabs
+                b: @main_tabs
             }
 
             // This is a "fixed" tab with no header that cannot be closed.
-            rooms_sidebar_tab = Tab {
-                name: "" // show no tab header
-                kind: rooms_sidebar // this template is defined below.
+            rooms_sidebar_tabs := DockTabs{
+                tabs: [@rooms_sidebar_tab]
+                selected: 0
+            }
+
+            main_tabs := DockTabs{
+                tabs: [@home_tab]
+                selected: 0
             }
 
-            main = Tabs {
-                tabs: [home_tab],
-                selected: 0,
+            rooms_sidebar_tab := DockTab{
+                name: "" // show no tab header
+                kind: @rooms_sidebar // this template is defined below.
+                template: @PermanentTab
             }
 
-            home_tab = Tab {
+            home_tab := DockTab{
                 name: "Home"
-                kind: welcome_screen
-                template: PermanentTab
+                kind: @welcome_screen
+                template: @PermanentTab
             }
 
             // Below are the templates of widgets that can be created within dock tabs.
-            rooms_sidebar = <RoomsSideBar> {}
-            welcome_screen = <WelcomeScreen> {}
-            room_screen = <RoomScreen> {}
-            invite_screen = <InviteScreen> {}
-            space_lobby_screen = <SpaceLobbyScreen> {}
+            rooms_sidebar := mod.widgets.RoomsSideBar {}
+            welcome_screen := mod.widgets.WelcomeScreen {}
+            room_screen := mod.widgets.RoomScreen {}
+            invite_screen := mod.widgets.InviteScreen {}
+            space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
         }
     }
 }
 
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct MainDesktopUI {
     #[deref]
     view: View,
@@ -106,14 +109,15 @@ pub struct MainDesktopUI {
     drawn_previously: bool,
 }
 
-impl LiveHook for MainDesktopUI {
-    fn after_new_from_doc(&mut self, _: &mut Cx) {
-        self.default_layout = self.save_dock_state();
-    }
-}
-
 impl Widget for MainDesktopUI {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if self.default_layout.dock_items.is_empty()
+            && self.default_layout.open_rooms.is_empty()
+            && self.default_layout.room_order.is_empty()
+            && self.default_layout.selected_room.is_none()
+        {
+            self.default_layout = self.save_dock_state(cx);
+        }
         self.widget_match_event(cx, event, scope); // invokes `WidgetMatchEvent` impl
         self.view.handle_event(cx, event, scope);
     }
@@ -125,7 +129,9 @@ impl Widget for MainDesktopUI {
             // This includes the currently selected space, which we get from the RoomsList widget.
             // We must set `selected_space` first before the load operation occurs, in order for
             // the proper space-specific instance of the saved dock UI layout/state to be selected.
-            self.selected_space = cx.get_global::<RoomsListRef>().get_selected_space_id();
+            if cx.has_global::<RoomsListRef>() {
+                self.selected_space = cx.get_global::<RoomsListRef>().get_selected_space_id();
+            }
             cx.action(MainDesktopUiAction::LoadDockFromAppState);
             self.drawn_previously = true;
         }
@@ -141,7 +147,7 @@ impl MainDesktopUI {
             return;
         }
 
-        let dock = self.view.dock(ids!(dock));
+        let dock = self.view.dock(cx, ids!(dock));
 
         // If the room is already open, select (jump to) its existing tab
         let room_tab_id = room.tab_id();
@@ -217,7 +223,7 @@ impl MainDesktopUI {
 
     /// Closes a tab in the dock and focuses on the latest open room.
     fn close_tab(&mut self, cx: &mut Cx, tab_id: LiveId) {
-        let dock = self.view.dock(ids!(dock));
+        let dock = self.view.dock(cx, ids!(dock));
         if let Some(room_being_closed) = self.open_rooms.get(&tab_id) {
             self.room_order.retain(|sr| sr != room_being_closed);
 
@@ -250,7 +256,7 @@ impl MainDesktopUI {
 
     /// Closes all tabs
     pub fn close_all_tabs(&mut self, cx: &mut Cx) {
-        let dock = self.view.dock(ids!(dock));
+        let dock = self.view.dock(cx, ids!(dock));
         for tab_id in self.open_rooms.keys() {        
             dock.close_tab(cx, *tab_id);
         }
@@ -272,7 +278,7 @@ impl MainDesktopUI {
         _scope: &mut Scope,
         room_name_id: &RoomNameId,
     ) {
-        let dock = self.view.dock(ids!(dock));
+        let dock = self.view.dock(cx, ids!(dock));
         let Some((new_widget, true)) = dock.replace_tab(
             cx,
             LiveId::from_str(room_name_id.room_id().as_str()),
@@ -305,11 +311,11 @@ impl MainDesktopUI {
 
     /// Saves a copy of the current UI state of the dock into the given app state,
     /// properly accounting for which space is currently selected.
-    fn save_dock_state_to(&mut self, app_state: &mut AppState) {
+    fn save_dock_state_to(&mut self, cx: &mut Cx, app_state: &mut AppState) {
         if self.open_rooms.is_empty() {
             return;
         } 
-        let saved_dock_state = self.save_dock_state();
+        let saved_dock_state = self.save_dock_state(cx);
         if let Some(space_id) = self.selected_space.as_ref() {
             app_state.saved_dock_state_per_space.insert(
                 space_id.clone(),
@@ -321,8 +327,8 @@ impl MainDesktopUI {
     }
 
     /// An inner function that creates a `SavedDockState` from the current contents of this widget. 
-    fn save_dock_state(&self) -> SavedDockState {
-        let dock = self.view.dock(ids!(dock));
+    fn save_dock_state(&self, cx: &mut Cx) -> SavedDockState {
+        let dock = self.view.dock(cx, ids!(dock));
         SavedDockState {
             dock_items: dock.clone_state().unwrap_or_default(),
             open_rooms: self.open_rooms.clone(),
@@ -336,7 +342,7 @@ impl MainDesktopUI {
     /// If the saved state is empty (has no open rooms), we use the default dock layout
     /// defined in the DSL: one splitter with the RoomsList on the left and a Welcome tab on the right.
     fn load_dock_state_from(&mut self, cx: &mut Cx, app_state: &mut AppState) {
-        let dock = self.view.dock(ids!(dock));
+        let dock = self.view.dock(cx, ids!(dock));
         let to_restore_opt = if let Some(ss) = self.selected_space.as_ref() {
             app_state.saved_dock_state_per_space.get(ss)
         } else {
@@ -429,7 +435,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                     _ => continue,
                 };
                 let app_state = scope.data.get_mut::<AppState>().unwrap();
-                self.save_dock_state_to(app_state);
+                self.save_dock_state_to(cx, app_state);
                 self.selected_space = new_space;
                 self.load_dock_state_from(cx, app_state);
                 self.redraw(cx);
@@ -458,7 +464,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                 }
                 // When dragging a tab, allow it to be dragged
                 DockAction::ShouldTabStartDrag(tab_id) => {
-                    self.view.dock(ids!(dock)).tab_start_drag(
+                    self.view.dock(cx, ids!(dock)).tab_start_drag(
                         cx,
                         tab_id,
                         DragItem::FilePath {
@@ -470,7 +476,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                 // When dragging a tab, allow it to be dragged
                 DockAction::Drag(drag_event) => {
                     if drag_event.items.len() == 1 {
-                        self.view.dock(ids!(dock)).accept_drag(cx, drag_event, DragResponse::Move);
+                        self.view.dock(cx, ids!(dock)).accept_drag(cx, drag_event, DragResponse::Move);
                     }
                 }
                 // When dropping a tab, move it to the new position
@@ -480,7 +486,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                         internal_id: Some(internal_id),
                         ..
                     } = &drop_event.items[0] {
-                        self.view.dock(ids!(dock)).drop_move(cx, drop_event.abs, *internal_id);
+                        self.view.dock(cx, ids!(dock)).drop_move(cx, drop_event.abs, *internal_id);
                     }
                     should_save_dock_action = true;
                 }
@@ -510,7 +516,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                 }
                 Some(MainDesktopUiAction::SaveDockIntoAppState) => {
                     let app_state = scope.data.get_mut::<AppState>().unwrap();
-                    self.save_dock_state_to(app_state);
+                    self.save_dock_state_to(cx, app_state);
                 }
                 _ => {}
             }
diff --git a/src/home/main_mobile_ui.rs b/src/home/main_mobile_ui.rs
index dec5b3d33..0db2c1c4e 100644
--- a/src/home/main_mobile_ui.rs
+++ b/src/home/main_mobile_ui.rs
@@ -6,47 +6,43 @@ use crate::{
 
 use super::invite_screen::InviteScreenWidgetExt;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::home::welcome_screen::WelcomeScreen;
-    use crate::home::room_screen::RoomScreen;
-    use crate::home::invite_screen::InviteScreen;
-    use crate::home::space_lobby::SpaceLobbyScreen;
 
-    pub MainMobileUI = {{MainMobileUI}} {
+    mod.widgets.MainMobileUI = set_type_default() do #(MainMobileUI::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill, height: Fill
+        align: Align{x: 0.0, y: 0.5}
         flow: Down,
+
         show_bg: true
-        draw_bg: {
-            color: (COLOR_PRIMARY_DARKER)
-        }
-        align: {x: 0.0, y: 0.5}
+        draw_bg.color: (COLOR_PRIMARY_DARKER)
+
+        welcome := mod.widgets.WelcomeScreen {}
 
-        welcome = <WelcomeScreen> {}
         // TODO: see if we can remove these wrappers
-        room_view = <View> {
-            align: {x: 0.5, y: 0.5}
+        room_view := View {
+            align: Align{x: 0.5, y: 0.5}
             width: Fill, height: Fill
-            room_screen = <RoomScreen> {}
+            room_screen := mod.widgets.RoomScreen {}
         }
-        invite_view = <View> {
-            align: {x: 0.5, y: 0.5}
+        invite_view := View {
+            align: Align{x: 0.5, y: 0.5}
             width: Fill, height: Fill
-            invite_screen = <InviteScreen> {}
+            invite_screen := mod.widgets.InviteScreen {}
         }
-        space_lobby_view = <View> {
-            align: {x: 0.5, y: 0.5}
+        space_lobby_view := View {
+            align: Align{x: 0.5, y: 0.5}
             width: Fill, height: Fill
-            space_lobby_screen = <SpaceLobbyScreen> {}
+            space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
         }
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct MainMobileUI {
     #[deref]
     view: View,
@@ -88,7 +84,7 @@ impl Widget for MainMobileUI {
                 show_space_lobby = false;
                 // Get a reference to the `RoomScreen` widget and tell it which room's data to show.
                 self.view
-                    .room_screen(ids!(room_screen))
+                    .room_screen(cx, ids!(room_screen))
                     .set_displayed_room(cx, room_name_id, None);
             }
             Some(SelectedRoom::InvitedRoom { room_name_id }) => {
@@ -97,7 +93,7 @@ impl Widget for MainMobileUI {
                 show_invite = true;
                 show_space_lobby = false;
                 self.view
-                    .invite_screen(ids!(invite_screen))
+                    .invite_screen(cx, ids!(invite_screen))
                     .set_displayed_invite(cx, room_name_id);
             }
             Some(SelectedRoom::Space { space_name_id }) => {
@@ -106,7 +102,7 @@ impl Widget for MainMobileUI {
                 show_invite = false;
                 show_space_lobby = true;
                 self.view
-                    .space_lobby_screen(ids!(space_lobby_screen))
+                    .space_lobby_screen(cx, ids!(space_lobby_screen))
                     .set_displayed_space(cx, space_name_id);
             }
             Some(SelectedRoom::Thread { room_name_id, thread_root_event_id }) => {
@@ -115,7 +111,7 @@ impl Widget for MainMobileUI {
                 show_invite = false;
                 show_space_lobby = false;
                 self.view
-                    .room_screen(ids!(room_screen))
+                    .room_screen(cx, ids!(room_screen))
                     .set_displayed_room(cx, room_name_id, Some(thread_root_event_id.clone()));
             }
             None => {
@@ -126,10 +122,10 @@ impl Widget for MainMobileUI {
             }
         }
 
-        self.view.view(ids!(welcome)).set_visible(cx, show_welcome);
-        self.view.view(ids!(room_view)).set_visible(cx, show_room);
-        self.view.view(ids!(invite_view)).set_visible(cx, show_invite);
-        self.view.view(ids!(space_lobby_view)).set_visible(cx, show_space_lobby);
+        self.view.view(cx, ids!(welcome)).set_visible(cx, show_welcome);
+        self.view.view(cx, ids!(room_view)).set_visible(cx, show_room);
+        self.view.view(cx, ids!(invite_view)).set_visible(cx, show_invite);
+        self.view.view(cx, ids!(space_lobby_view)).set_visible(cx, show_space_lobby);
         self.view.draw_walk(cx, scope, walk)
     }
 }
diff --git a/src/home/mod.rs b/src/home/mod.rs
index 8f8ea8e9d..cf9f07a57 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -1,4 +1,4 @@
-use makepad_widgets::Cx;
+use makepad_widgets::ScriptVm;
 
 pub mod add_room;
 pub mod edited_indicator;
@@ -29,34 +29,35 @@ pub mod new_message_context_menu;
 pub mod room_context_menu;
 pub mod link_preview;
 pub mod room_image_viewer;
+pub mod event_group;
 
-pub fn live_design(cx: &mut Cx) {
-    search_messages::live_design(cx);
-    home_screen::live_design(cx);
-    loading_pane::live_design(cx);
-    location_preview::live_design(cx);
-    add_room::live_design(cx);
-    space_lobby::live_design(cx);
-    rooms_list_entry::live_design(cx);
-    rooms_list_header::live_design(cx);
-    rooms_list::live_design(cx);
-    edited_indicator::live_design(cx);
-    editing_pane::live_design(cx);
-    new_message_context_menu::live_design(cx);
-    event_source_modal::live_design(cx);
-    room_context_menu::live_design(cx);
-    invite_modal::live_design(cx);
-    invite_screen::live_design(cx);
-    tombstone_footer::live_design(cx);
-    room_screen::live_design(cx);
-    room_read_receipt::live_design(cx);
-    rooms_sidebar::live_design(cx);
-    main_mobile_ui::live_design(cx);
-    main_desktop_ui::live_design(cx);
-    spaces_bar::live_design(cx);
-    navigation_tab_bar::live_design(cx);
-    welcome_screen::live_design(cx);
-    light_themed_dock::live_design(cx);
-    event_reaction_list::live_design(cx);
-    link_preview::live_design(cx);
+pub fn script_mod(vm: &mut ScriptVm) {
+    search_messages::script_mod(vm);
+    loading_pane::script_mod(vm);
+    location_preview::script_mod(vm);
+    add_room::script_mod(vm);
+    space_lobby::script_mod(vm);
+    link_preview::script_mod(vm);
+    event_reaction_list::script_mod(vm);
+    room_read_receipt::script_mod(vm);
+    rooms_list_entry::script_mod(vm);
+    rooms_list_header::script_mod(vm);
+    rooms_list::script_mod(vm);
+    edited_indicator::script_mod(vm);
+    editing_pane::script_mod(vm);
+    new_message_context_menu::script_mod(vm);
+    event_source_modal::script_mod(vm);
+    room_context_menu::script_mod(vm);
+    invite_modal::script_mod(vm);
+    invite_screen::script_mod(vm);
+    tombstone_footer::script_mod(vm);
+    room_screen::script_mod(vm);
+    rooms_sidebar::script_mod(vm);
+    welcome_screen::script_mod(vm);
+    main_mobile_ui::script_mod(vm);
+    main_desktop_ui::script_mod(vm);
+    spaces_bar::script_mod(vm);
+    navigation_tab_bar::script_mod(vm);
+    // Keep HomeScreen last, it references many widgets registered above.
+    home_screen::script_mod(vm);
 }
diff --git a/src/home/navigation_tab_bar.rs b/src/home/navigation_tab_bar.rs
index 852dfe262..991cade89 100644
--- a/src/home/navigation_tab_bar.rs
+++ b/src/home/navigation_tab_bar.rs
@@ -34,247 +34,191 @@ use crate::{
         user_profile::UserProfile,
         user_profile_cache::{self, UserProfileUpdate},
     }, shared::{
-        avatar::{AvatarState, AvatarWidgetExt}, callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, styles::*, verification_badge::VerificationBadgeWidgetExt
+        avatar::{AvatarState, AvatarWidgetExt}, styles::*, verification_badge::VerificationBadgeWidgetExt
     }, sliding_sync::{current_user_id, AccountDataAction}, utils::{self, RoomNameId}
 };
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::verification_badge::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
-    use crate::home::spaces_bar::*;
 
     // A RadioButton styled to fit within our NavigationTabBar.
-    pub NavigationTabButton = <RadioButton> {
+    // Use RadioButtonTab as the base to stay aligned with current widgets/studio behavior.
+    mod.widgets.NavigationTabButton = RadioButtonTab {
         width: Fill,
         height: (NAVIGATION_TAB_BAR_SIZE - 5),
         padding: 5,
-        margin: 3, 
-        align: {x: 0.5, y: 0.5}
+        margin: 3,
+        align: Align{x: 0.5, y: 0.5}
         flow: Down,
-        
-        icon_walk: {margin: 0, width: (NAVIGATION_TAB_BAR_SIZE/2.2), height: Fit}
+        text: "",
+
+        icon_walk: Walk{
+            margin: 0,
+            width: (NAVIGATION_TAB_BAR_SIZE / 2.2),
+            height: (NAVIGATION_TAB_BAR_SIZE / 2.2)
+        }
         // Fully hide the text with zero size, zero margin, and zero spacing
-        label_walk: {margin: 0, width: 0, height: 0}
+        label_walk: Walk{margin: 0, width: 0, height: 0}
         spacing: 0,
 
-        draw_bg: {
-            radio_type: Tab,
-
-            color: (COLOR_NAVIGATION_TAB_BG)
-            color_hover: (COLOR_NAVIGATION_TAB_BG_HOVER)
-            color_active: (COLOR_NAVIGATION_TAB_BG_ACTIVE)
-
-            border_size: 0.0
-            border_color: #0000
-            uniform inset: vec4(0.0, 0.0, 0.0, 0.0)
-            border_radius: 4.0
-
-            fn get_color(self) -> vec4 {
-                return mix(
-                    mix(
-                        self.color,
-                        self.color_hover,
-                        self.hover
-                    ),
-                    self.color_active,
-                    self.active
-                )
-            }
-
-            fn get_border_color(self) -> vec4 {
-                return self.border_color
-            }
-
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
-                sdf.box(
-                    self.inset.x + self.border_size,
-                    self.inset.y + self.border_size,
-                    self.rect_size.x - (self.inset.x + self.inset.z + self.border_size * 2.0),
-                    self.rect_size.y - (self.inset.y + self.inset.w + self.border_size * 2.0),
-                    max(1.0, self.border_radius)
-                )
-                sdf.fill_keep(self.get_color())
-                if self.border_size > 0.0 {
-                    sdf.stroke(self.get_border_color(), self.border_size)
-                }
-                return sdf.result;
-            }
+        draw_bg +: {
+            color: uniform((COLOR_NAVIGATION_TAB_BG))
+            color_hover: uniform((COLOR_NAVIGATION_TAB_BG_HOVER))
+            color_down: uniform((COLOR_NAVIGATION_TAB_BG_HOVER))
+            color_active: uniform((COLOR_NAVIGATION_TAB_BG_ACTIVE))
+            color_focus: uniform((COLOR_NAVIGATION_TAB_BG_ACTIVE))
+
+            border_size: uniform(0.0)
+            border_radius: uniform(4.0)
+            border_color: uniform(#0000)
+            border_color_hover: uniform(#0000)
+            border_color_down: uniform(#0000)
+            border_color_active: uniform(#0000)
+            border_color_focus: uniform(#0000)
         }
 
-        draw_text: {
-            instance hover: 0.0
-            instance active: 0.0
+        draw_text +: {
             color: (COLOR_NAVIGATION_TAB_FG)
-            color_hover: (COLOR_NAVIGATION_TAB_FG_HOVER)
-            color_active: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
-
-            text_style: <THEME_FONT_BOLD>{font_size: 9}
-
-            fn get_color(self) -> vec4 {
-                return mix(
-                    mix(
-                        self.color,
-                        self.color_hover,
-                        self.hover
-                    ),
-                    self.color_active,
-                    self.active
-                )
-            }
+            color_hover: uniform((COLOR_NAVIGATION_TAB_FG_HOVER))
+            color_down: uniform((COLOR_NAVIGATION_TAB_FG_HOVER))
+            color_active: uniform((COLOR_NAVIGATION_TAB_FG_ACTIVE))
+            color_focus: uniform((COLOR_NAVIGATION_TAB_FG_ACTIVE))
+
+            text_style: theme.font_bold {font_size: 9}
         }
 
-        draw_icon: {
-            instance hover: 0.0
-            instance active: 0.0
-            uniform color: (COLOR_NAVIGATION_TAB_FG)
-            uniform color_hover: (COLOR_NAVIGATION_TAB_FG_HOVER)
-            uniform color_active: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
-            fn get_color(self) -> vec4 {
-                return mix(
-                    mix(
-                        self.color,
-                        self.color_hover,
-                        self.focus
-                    ),
-                    self.color_active,
-                    self.active
-                )
-            }
+        draw_icon +: {
+            color: (COLOR_NAVIGATION_TAB_FG)
+            color_hover: uniform((COLOR_NAVIGATION_TAB_FG_HOVER))
+            color_down: uniform((COLOR_NAVIGATION_TAB_FG_HOVER))
+            color_active: uniform((COLOR_NAVIGATION_TAB_FG_ACTIVE))
+            color_focus: uniform((COLOR_NAVIGATION_TAB_FG_ACTIVE))
         }
     }
 
-    ProfileIcon = {{ProfileIcon}}<RoundedView> {
+    mod.widgets.ProfileIcon = #(ProfileIcon::register_widget(vm)) {
         width: Fill,
         height: (NAVIGATION_TAB_BAR_SIZE - 8)
         flow: Overlay
-        align: { x: 0.5, y: 0.5 }
-        cursor: Default,
-
-        our_own_avatar = <Avatar> {
+        align: Align{ x: 0.5, y: 0.5 }
+        our_own_avatar := Avatar {
             width: 45, height: 45
             // If no avatar picture, use white text on a dark background.
-            text_view = {
-                draw_bg: {
-                    background_color: (COLOR_FG_DISABLED),
+            text_view +: {
+                draw_bg.color: (COLOR_FG_DISABLED),
+                text +: {
+                    draw_text +: {
+                        text_style: theme.font_regular { font_size: 16.0 },
+                        color: (COLOR_PRIMARY),
+                    }
                 }
-                text = { draw_text: {
-                    text_style: { font_size: 16.0 },
-                    color: (COLOR_PRIMARY),
-                } }
             }
         }
 
-        <View> {
-            align: { x: 0.5, y: 0.0 }
-            margin: { left: 42 }
-            verification_badge = <VerificationBadge> {}
+        View {
+            align: Align{ x: 0.5, y: 0.0 }
+            margin: Inset{ left: 42 }
+            verification_badge := VerificationBadge {}
         }
     }
 
-    HomeButton = <NavigationTabButton> {
-        draw_icon: { svg_file: (ICON_HOME) }
-        animator: { active = { default: on } }
+    mod.widgets.HomeButton = mod.widgets.NavigationTabButton {
+        draw_icon +: { svg: (ICON_HOME) }
+        animator +: { active: { default: @on } }
     }
 
-    ToggleSpacesBarButton = <RobrixIconButton> {
+    mod.widgets.ToggleSpacesBarButton = RobrixIconButton {
         width: Fill,
         padding: 16
         spacing: 0,
-        align: {x: 0.5, y: 0.5}
-        draw_bg: {
-            color: (COLOR_SECONDARY)
+        align: Align{x: 0.5, y: 0.5}
+        draw_bg +: {
+            color: instance((COLOR_SECONDARY))
         }
-        draw_icon: {
-            svg_file: (ICON_SQUARES)
+        draw_icon +: {
+            svg: (ICON_SQUARES)
             color: (COLOR_NAVIGATION_TAB_FG)
         }
-        icon_walk: {width: (NAVIGATION_TAB_BAR_SIZE/2.2), height: Fit, margin: 0 }
+        icon_walk: Walk{
+            width: (NAVIGATION_TAB_BAR_SIZE / 2.2),
+            height: (NAVIGATION_TAB_BAR_SIZE / 2.2),
+            margin: 0
+        }
     }
 
-    SettingsButton = <NavigationTabButton> {
-        draw_icon: { svg_file: (ICON_SETTINGS) }
+    mod.widgets.SettingsButton = mod.widgets.NavigationTabButton {
+        draw_icon +: { svg: (ICON_SETTINGS) }
     }
 
-    AddRoomButton = <NavigationTabButton> {
-        draw_icon: { svg_file: (ICON_ADD) }
+    mod.widgets.AddRoomButton = mod.widgets.NavigationTabButton {
+        draw_icon +: { svg: (ICON_ADD) }
     }
 
-    Separator = <LineH> { margin: 8 }
+    mod.widgets.Separator = LineH { margin: 8 }
 
-    pub NavigationTabBar = {{NavigationTabBar}}<AdaptiveView> {
-        Desktop = {
+    mod.widgets.NavigationTabBar = #(NavigationTabBar::register_widget(vm)) {
+        Desktop := RoundedView {
             flow: Down,
-            align: {x: 0.5}
-            padding: {top: 40., bottom: 8}
+            align: Align{x: 0.5}
+            padding: Inset{top: 40., bottom: 8}
             width: (NAVIGATION_TAB_BAR_SIZE), 
             height: Fill
 
-            show_bg: true
-            draw_bg: {
-                color: (COLOR_SECONDARY)
+            draw_bg +: {
+                color: instance((COLOR_SECONDARY))
+                border_radius: 4.0
             }
 
-            <CachedWidget> {
-                profile_icon = <ProfileIcon> {}
+            CachedWidget {
+                profile_icon := mod.widgets.ProfileIcon {}
             }
-
-            <CachedWidget> {
-                home_button = <HomeButton> {}
+            CachedWidget {
+                home_button := mod.widgets.HomeButton {}
             }
-
-            <CachedWidget> {
-                add_room_button = <AddRoomButton> {}
+            CachedWidget {
+                add_room_button := mod.widgets.AddRoomButton {}
             }
 
-            <Separator> {}
+            mod.widgets.Separator {}
 
-            <CachedWidget> {
-                root_spaces_bar = <SpacesBar> {}
+            CachedWidget {
+                root_spaces_bar := mod.widgets.SpacesBar {}
             }
 
-            <Separator> {}
-            
-            <CachedWidget> {
-                settings_button = <SettingsButton> {}
+            mod.widgets.Separator {}
+
+            CachedWidget {
+                settings_button := mod.widgets.SettingsButton {}
             }
         }
 
-        Mobile = <RoundedView> {
+        Mobile := RoundedView {
             flow: Right
-            align: {x: 0.5, y: 0.5}
+            align: Align{x: 0.5, y: 0.5}
             width: Fill,
             height: (NAVIGATION_TAB_BAR_SIZE)
 
-            show_bg: true
-            draw_bg: {
-                color: (COLOR_SECONDARY)
+            draw_bg +: {
+                color: instance((COLOR_SECONDARY))
                 border_radius: 4.0
             }
 
-            <CachedWidget> {
-                home_button = <HomeButton> {}
+            CachedWidget {
+                home_button := mod.widgets.HomeButton {}
             }
-
-            <CachedWidget> {
-                add_room_button = <AddRoomButton> {}
+            CachedWidget {
+                add_room_button := mod.widgets.AddRoomButton {}
             }
 
-            toggle_spaces_bar_button = <ToggleSpacesBarButton> {}
+            toggle_spaces_bar_button := mod.widgets.ToggleSpacesBarButton {}
 
-            <CachedWidget> {
-                settings_button = <SettingsButton> {}
+            CachedWidget {
+                settings_button := mod.widgets.SettingsButton {}
             }
-
-            <CachedWidget> {
-                profile_icon = <ProfileIcon> {}
+            CachedWidget {
+                profile_icon := mod.widgets.ProfileIcon {}
             }
         }
     }
@@ -283,22 +227,18 @@ live_design! {
 /// The icon in the NavigationTabBar that show the user's avatar.
 ///
 /// Clicking on this icon will open the settings screen.
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct ProfileIcon {
     #[deref] view: View,
     #[rust] own_profile: Option<UserProfile>,
 }
 
-impl LiveHook for ProfileIcon {
-    fn after_update_from_doc(&mut self, cx: &mut Cx) {
+impl Widget for ProfileIcon {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         if self.own_profile.is_none() {
             self.own_profile = get_own_profile(cx);
         }
-    }
-}
 
-impl Widget for ProfileIcon {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         // A UI Signal indicates that a user profile or avatar may have been updated.
         if let Event::Signal = event {
             let mut needs_redraw = false;
@@ -391,7 +331,7 @@ impl Widget for ProfileIcon {
         match event.hits(cx, area) {
             Hit::FingerLongPress(_) | Hit::FingerHoverIn(_) => {
                 let (verification_str, bg_color) = self.view
-                    .verification_badge(ids!(verification_badge))
+                    .verification_badge(cx, ids!(verification_badge))
                     .tooltip_content();
                 let text = self.own_profile.as_ref().map_or_else(
                     || format!("Not logged in.\n\n{}", verification_str),
@@ -405,8 +345,7 @@ impl Widget for ProfileIcon {
                     options.bg_color = c;
                 }
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     TooltipAction::HoverIn {
                         text,
                         widget_rect: area.rect(cx),
@@ -415,7 +354,7 @@ impl Widget for ProfileIcon {
                 );
             }
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
             }
             _ => { }
         };
@@ -424,7 +363,7 @@ impl Widget for ProfileIcon {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        let our_own_avatar = self.view.avatar(ids!(our_own_avatar));
+        let our_own_avatar = self.view.avatar(cx, ids!(our_own_avatar));
         let Some(own_profile) = self.own_profile.as_ref() else {
             // If we don't have a profile, default to an unknown avatar.
             our_own_avatar.show_text(
@@ -462,7 +401,7 @@ impl Widget for ProfileIcon {
 ///
 /// * In the "desktop" (wide) layout, this is a vertical bar on the left.
 /// * In the "mobile" (narrow) layout, this is a horizontal bar on the bottom.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct NavigationTabBar {
     #[deref] view: AdaptiveView,
 
@@ -475,7 +414,7 @@ impl Widget for NavigationTabBar {
 
         if let Event::Actions(actions) = event {
             // Handle one of the radio buttons being clicked (selected).
-            let radio_button_set = self.view.radio_button_set(ids_array!(
+            let radio_button_set = self.view.radio_button_set(cx, ids_array!(
                 home_button,
                 add_room_button,
                 settings_button,
@@ -487,7 +426,7 @@ impl Widget for NavigationTabBar {
                 _ => { }
             }
 
-            if self.view.button(ids!(toggle_spaces_bar_button)).clicked(actions) {
+            if self.view.button(cx, ids!(toggle_spaces_bar_button)).clicked(actions) {
                 self.is_spaces_bar_shown = !self.is_spaces_bar_shown;
                 cx.action(NavigationBarAction::ToggleSpacesBar);
             }
@@ -497,9 +436,9 @@ impl Widget for NavigationTabBar {
                 // update our radio buttons accordingly.
                 if let Some(NavigationBarAction::TabSelected(tab)) = action.downcast_ref() {
                     match tab {
-                        SelectedTab::Home     => self.view.radio_button(ids!(home_button)).select(cx, scope),
-                        SelectedTab::AddRoom  => self.view.radio_button(ids!(add_room_button)).select(cx, scope),
-                        SelectedTab::Settings => self.view.radio_button(ids!(settings_button)).select(cx, scope),
+                        SelectedTab::Home     => self.view.radio_button(cx, ids!(home_button)).select(cx, scope),
+                        SelectedTab::AddRoom  => self.view.radio_button(cx, ids!(add_room_button)).select(cx, scope),
+                        SelectedTab::Settings => self.view.radio_button(cx, ids!(settings_button)).select(cx, scope),
                         SelectedTab::Space { .. } => {
                             for rb in radio_button_set.iter() {
                                 if let Some(mut rb_inner) = rb.borrow_mut() {
diff --git a/src/home/new_message_context_menu.rs b/src/home/new_message_context_menu.rs
index d78fbc264..faa9d6f09 100644
--- a/src/home/new_message_context_menu.rs
+++ b/src/home/new_message_context_menu.rs
@@ -13,185 +13,178 @@ use super::room_screen::MessageAction;
 const BUTTON_HEIGHT: f64 = 35.0; // KEEP IN SYNC WITH BUTTON_HEIGHT BELOW
 const MENU_WIDTH: f64 = 215.0;   // KEEP IN SYNC WITH MENU_WIDTH BELOW
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
-    BUTTON_HEIGHT = 35  // KEEP IN SYNC WITH BUTTON_HEIGHT ABOVE
-    MENU_WIDTH = 215    // KEEP IN SYNC WITH MENU_WIDTH ABOVE
+    mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT = 35  // KEEP IN SYNC WITH BUTTON_HEIGHT ABOVE
+    mod.widgets.NEW_MESSAGE_CONTEXT_MENU_WIDTH = 215    // KEEP IN SYNC WITH MENU_WIDTH ABOVE
 
-    ContextMenuButton = <RobrixIconButton> {
-        height: (BUTTON_HEIGHT)
+    mod.widgets.NewMessageContextMenuButton = RobrixIconButton {
+        height: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT)
         width: Fill,
         margin: 0,
-        icon_walk: {width: 16, height: 16, margin: {right: 3}}
+        icon_walk: Walk{width: 16, height: 16, margin: Inset{right: 3}}
     }
 
-    pub NewMessageContextMenu = {{NewMessageContextMenu}} {
+    mod.widgets.NewMessageContextMenu = set_type_default() do #(NewMessageContextMenu::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        cursor: Default,
+        cursor: MouseCursor.Default,
         // Align to top-left such that our coordinate adjustment
         // when showing this menu pane will work correctly.
-        align: {x: 0, y: 0}
+        align: Align{x: 0, y: 0}
 
         // Show a slightly darkened translucent background to make the menu stand out.
         show_bg: true
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                return vec4(0., 0., 0., 0.3)
-            }
-        }
+        draw_bg.color: #0000004d
 
-        main_content = <RoundedView> {
+        main_content := RoundedView {
             flow: Down
-            width: (MENU_WIDTH),
+            width: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_WIDTH),
             height: Fit,
             padding: 10
             spacing: 0,
-            align: {x: 0, y: 0}
+            align: Align{x: 0, y: 0}
 
             show_bg: true
-            draw_bg: {
-                color: #fff
+            draw_bg +: {
+                color: instance(#fff)
                 border_radius: 5.0
                 border_size: 0.5
-                border_color: #888
+                border_color: instance(#888)
             }
 
             // Shows either the "Add Reaction" button or a reaction text input.
-            react_view = <View> {
+            react_view := View {
                 flow: Overlay
-                height: (BUTTON_HEIGHT)
-                align: {y: 0.5}
-                react_button = <ContextMenuButton> {
-                    draw_icon: { svg_file: (ICON_ADD_REACTION) }
+                height: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT)
+                align: Align{y: 0.5}
+                react_button := mod.widgets.NewMessageContextMenuButton {
+                    draw_icon +: { svg: (ICON_ADD_REACTION) }
                     text: "Add Reaction"
                 }
 
-                reaction_input_view = <View> {
-                    width: Fill,
-                    height: (BUTTON_HEIGHT)
-                    align: {y: 0.5}
+                    reaction_input_view := View {
+                        width: Fill,
+                        height: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT)
+                    align: Align{y: 0.5}
                     flow: Right,
                     visible: false, // will be shown once the react_button is clicked
 
-                    reaction_text_input = <RobrixTextInput> {
+                    reaction_text_input := RobrixTextInput {
                         width: Fill,
                         height: Fit,
-                        align: {x: 0, y: 0.5}
+                        align: Align{x: 0, y: 0.5}
                         empty_text: "Enter reaction..."
                         flow: Right, // do not wrap
-                        draw_text: {
+                        draw_text +: {
                             // TODO: we want the TextInput flow to show all text
                             // within the single-line box by scrolling horizontally
                             // when the text is too long, upon a user typing/pasting
                             // or navigating with the mouse or arrow keys.
                             // However, makepad doesn't yet support this feature,
                             // so Ellipsis is the closest we can get.
-                            wrap: Ellipsis,
+                            flow: Flow.Right{wrap: true},
                         }
                     }
-                    reaction_send_button = <RobrixIconButton> {
-                        height: (BUTTON_HEIGHT)
-                        align: {x: 0.5, y: 0.5}
-                        padding: {left: 10, right: 10, top: 8, bottom: 8}
+                    reaction_send_button := RobrixIconButton {
+                        height: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT)
+                        align: Align{x: 0.5, y: 0.5}
+                        padding: Inset{left: 10, right: 10, top: 8, bottom: 8}
                         spacing: 0,
-                        draw_icon: {
-                            svg_file: (ICON_SEND)
+                        draw_icon +: {
+                            svg: (ICON_SEND)
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                        draw_bg: {
-                            border_color: (COLOR_FG_ACCEPT_GREEN),
-                            color: (COLOR_BG_ACCEPT_GREEN)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                            color: instance((COLOR_BG_ACCEPT_GREEN))
                         }
                         text: ""
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
                     }
                 }
             }
 
-            reply_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_REPLY) }
-                icon_walk: { margin: {top: 1, right: 3}}
+            reply_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_REPLY) }
+                icon_walk: Walk{ margin: Inset{top: 1, right: 3}}
                 text: "Reply"
             }
 
-            divider_after_react_reply = <LineH> {
-                margin: {top: 3, bottom: 3}
+            divider_after_react_reply := LineH {
+                margin: Inset{top: 3, bottom: 3}
                 width: Fill,
             }
 
-            edit_message_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_EDIT) }
-                icon_walk: { margin: {top: -3, right: 3} }
+            edit_message_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_EDIT) }
+                icon_walk: Walk{ margin: Inset{top: -3, right: 3} }
                 text: "Edit Message"
             }
 
             // TODO: check if the current user is allowed to pin/unpin messages:
             //       <https://matrix-org.github.io/matrix-rust-sdk/matrix_sdk_base/struct.RoomMember.html#method.can_pin_or_unpin_event>
-            pin_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_PIN) }
+            pin_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_PIN) }
                 text: "" // set dynamically to "Pin Message" or "Unpin Message"
             }
 
-            copy_text_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_COPY) }
+            copy_text_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_COPY) }
                 text: "Copy Text"
             }
 
-            copy_html_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_HTML_FILE) }
-                icon_walk: { margin: {left: 1.5, right: 1.5} }
+            copy_html_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_HTML_FILE) }
+                icon_walk: Walk{ margin: Inset{left: 1.5, right: 1.5} }
                 text: "Copy Text as HTML"
             }
 
-            copy_link_to_message_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_LINK) }
+            copy_link_to_message_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_LINK) }
                 text: "Copy Link to Message"
             }
 
-            view_source_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_VIEW_SOURCE) }
-                icon_walk: { margin: {top: 6, right: 3} }
+            view_source_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_VIEW_SOURCE) }
+                icon_walk: Walk{ margin: Inset{top: 6, right: 3} }
                 text: "View Source"
             }
 
-            jump_to_related_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_JUMP) }
+            jump_to_related_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: { svg: (ICON_JUMP) }
                 text: "Jump to Related Event"
             }
 
-            divider_before_report_delete = <LineH> {
-                margin: {top: 3, bottom: 3}
+            divider_before_report_delete := LineH {
+                margin: Inset{top: 3, bottom: 3}
                 width: Fill,
             }
 
-            // report_button = <ContextMenuButton> {
-            //     draw_icon: {
-            //         svg_file: (ICON_TRASH) // TODO: ICON_REPORT/WARNING/FLAG
+            // report_button = ContextMenuButton {
+            //     draw_icon +: {
+            //         svg: (ICON_TRASH) // TODO: ICON_REPORT/WARNING/FLAG
             //         color: (COLOR_FG_DANGER_RED),
             //     }
-            //     icon_walk: { margin: {left: -2, right: 3} }
+            //     icon_walk: Walk{ margin: Inset{left: -2, right: 3} }
             //
-            //     draw_bg: {
+            //     draw_bg +: {
             //         border_color: (COLOR_FG_DANGER_RED),
             //         color: (COLOR_BG_DANGER_RED)
             //     }
             //     text: "Report"
-            //     draw_text:{
+            //     draw_text +: {
             //         color: (COLOR_FG_DANGER_RED),
             //     }
             // }
@@ -201,17 +194,17 @@ live_design! {
             //       The caller needs to use `can_redact_own()` or `can_redact_other()`:
             //       https://matrix-org.github.io/matrix-rust-sdk/matrix_sdk_base/struct.RoomMember.html#method.can_redact_own
 
-            delete_button = <ContextMenuButton> {
-                draw_icon: {
-                    svg_file: (ICON_TRASH)
+            delete_button := mod.widgets.NewMessageContextMenuButton {
+                draw_icon +: {
+                    svg: (ICON_TRASH)
                     color: (COLOR_FG_DANGER_RED),
                 }
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                 }
                 text: "Delete"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
             }
@@ -304,7 +297,7 @@ impl MessageDetails {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct NewMessageContextMenu {
     #[deref] view: View,
     #[rust] details: Option<MessageDetails>,
@@ -335,7 +328,7 @@ impl Widget for NewMessageContextMenu {
             || match event.hits_with_capture_overload(cx, area, true) {
                 Hit::KeyUp(key) => key.key_code == KeyCode::Escape,
                 Hit::FingerDown(fde) => {
-                    let reaction_text_input = self.view.text_input(ids!(reaction_input_view.reaction_text_input));
+                    let reaction_text_input = self.view.text_input(cx, ids!(reaction_input_view.reaction_text_input));
                     if reaction_text_input.area().rect(cx).contains(fde.abs) {
                         reaction_text_input.set_key_focus(cx);
                     } else {
@@ -344,7 +337,7 @@ impl Widget for NewMessageContextMenu {
                     false
                 }
                 Hit::FingerUp(fue) if fue.is_over => {
-                    !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
+                    !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                 Hit::FingerScroll(_) => true,
                 _ => false,
@@ -360,18 +353,17 @@ impl Widget for NewMessageContextMenu {
 }
 
 impl WidgetMatchEvent for NewMessageContextMenu {
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
         let Some(details) = self.details.as_ref() else { return };
         let mut close_menu = false;
 
-        let reaction_text_input = self.view.text_input(ids!(reaction_input_view.reaction_text_input));
-        let reaction_send_button = self.view.button(ids!(reaction_input_view.reaction_send_button));
+        let reaction_text_input = self.view.text_input(cx, ids!(reaction_input_view.reaction_text_input));
+        let reaction_send_button = self.view.button(cx, ids!(reaction_input_view.reaction_send_button));
         if reaction_send_button.clicked(actions)
             || reaction_text_input.returned(actions).is_some()
         {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::React {
                     details: details.clone(),
                     reaction: reaction_text_input.text(),
@@ -382,88 +374,79 @@ impl WidgetMatchEvent for NewMessageContextMenu {
         else if reaction_text_input.escaped(actions) {
             close_menu = true;
         }
-        else if self.button(ids!(react_button)).clicked(actions) {
+        else if self.button(cx, ids!(react_button)).clicked(actions) {
             // Show a box to allow the user to input the reaction.
             // In the future, we'll show an emoji chooser.
-            self.view.button(ids!(react_button)).set_visible(cx, false);
-            self.view.view(ids!(reaction_input_view)).set_visible(cx, true);
-            self.text_input(ids!(reaction_input_view.reaction_text_input)).set_key_focus(cx);
+            self.view.button(cx, ids!(react_button)).set_visible(cx, false);
+            self.view.view(cx, ids!(reaction_input_view)).set_visible(cx, true);
+            self.text_input(cx, ids!(reaction_input_view.reaction_text_input)).set_key_focus(cx);
             self.redraw(cx);
             close_menu = false;
         }
-        else if self.button(ids!(reply_button)).clicked(actions) {
+        else if self.button(cx, ids!(reply_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::Reply(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(ids!(edit_message_button)).clicked(actions) {
+        else if self.button(cx, ids!(edit_message_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::Edit(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(ids!(pin_button)).clicked(actions) {
+        else if self.button(cx, ids!(pin_button)).clicked(actions) {
             if details.abilities.contains(MessageAbilities::CanPin) {
                 cx.widget_action(
-                    details.room_screen_widget_uid,
-                    &scope.path,
+                    details.room_screen_widget_uid, 
                     MessageAction::Pin(details.clone()),
                 );
             } else if details.abilities.contains(MessageAbilities::CanUnpin) {
                 cx.widget_action(
-                    details.room_screen_widget_uid,
-                    &scope.path,
+                    details.room_screen_widget_uid, 
                     MessageAction::Unpin(details.clone()),
                 );
             }
             close_menu = true;
         }
-        else if self.button(ids!(copy_text_button)).clicked(actions) {
+        else if self.button(cx, ids!(copy_text_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::CopyText(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(ids!(copy_html_button)).clicked(actions) {
+        else if self.button(cx, ids!(copy_html_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::CopyHtml(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(ids!(copy_link_to_message_button)).clicked(actions) {
+        else if self.button(cx, ids!(copy_link_to_message_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::CopyLink(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(ids!(view_source_button)).clicked(actions) {
+        else if self.button(cx, ids!(view_source_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::ViewSource(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(ids!(jump_to_related_button)).clicked(actions) {
+        else if self.button(cx, ids!(jump_to_related_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::JumpToRelated(details.clone()),
             );
             close_menu = true;
         }
-        // else if self.button(ids!(report_button)).clicked(actions) {
+        // else if self.button(cx, ids!(report_button)).clicked(actions) {
         //     cx.widget_action(
         //         details.room_screen_widget_uid,
         //         &scope.path,
@@ -475,10 +458,9 @@ impl WidgetMatchEvent for NewMessageContextMenu {
         //     );
         //    close_menu = true;
         // }
-        else if self.button(ids!(delete_button)).clicked(actions) {
+        else if self.button(cx, ids!(delete_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid,
-                &scope.path,
+                details.room_screen_widget_uid, 
                 MessageAction::Redact {
                     details: details.clone(),
                     // TODO: show a Modal to confirm deletion, and get the reason.
@@ -521,17 +503,17 @@ impl NewMessageContextMenu {
     fn set_button_visibility(&mut self, cx: &mut Cx) -> f64 {
         let Some(details) = self.details.as_ref() else { return 0.0 };
 
-        let react_button = self.view.button(ids!(react_button));
-        let reply_button = self.view.button(ids!(reply_button));
-        let edit_button = self.view.button(ids!(edit_message_button));
-        let pin_button = self.view.button(ids!(pin_button));
-        let copy_text_button = self.view.button(ids!(copy_text_button));
-        let copy_html_button = self.view.button(ids!(copy_html_button));
-        let copy_link_button = self.view.button(ids!(copy_link_to_message_button));
-        let view_source_button = self.view.button(ids!(view_source_button));
-        let jump_to_related_button = self.view.button(ids!(jump_to_related_button));
-        // let report_button = self.view.button(ids!(report_button));
-        let delete_button = self.view.button(ids!(delete_button));
+        let react_button = self.view.button(cx, ids!(react_button));
+        let reply_button = self.view.button(cx, ids!(reply_button));
+        let edit_button = self.view.button(cx, ids!(edit_message_button));
+        let pin_button = self.view.button(cx, ids!(pin_button));
+        let copy_text_button = self.view.button(cx, ids!(copy_text_button));
+        let copy_html_button = self.view.button(cx, ids!(copy_html_button));
+        let copy_link_button = self.view.button(cx, ids!(copy_link_to_message_button));
+        let view_source_button = self.view.button(cx, ids!(view_source_button));
+        let jump_to_related_button = self.view.button(cx, ids!(jump_to_related_button));
+        // let report_button = self.view.button(cx, ids!(report_button));
+        let delete_button = self.view.button(cx, ids!(delete_button));
 
         // Determine which buttons should be shown.
         // Note that some buttons are always enabled:
@@ -551,10 +533,10 @@ impl NewMessageContextMenu {
         let show_divider_before_report_delete = show_delete; // || show_report;
 
         // Actually set the buttons' visibility.
-        self.view.view(ids!(react_view)).set_visible(cx, show_react);
+        self.view.view(cx, ids!(react_view)).set_visible(cx, show_react);
         react_button.set_visible(cx, show_react);
         reply_button.set_visible(cx, show_reply_to);
-        self.view.view(ids!(divider_after_react_reply)).set_visible(cx, show_divider_after_react_reply);
+        self.view.view(cx, ids!(divider_after_react_reply)).set_visible(cx, show_divider_after_react_reply);
         edit_button.set_visible(cx, show_edit);
         if details.abilities.contains(MessageAbilities::CanPin) {
             pin_button.set_text(cx, "Pin Message");
@@ -568,7 +550,7 @@ impl NewMessageContextMenu {
         pin_button.set_visible(cx, show_pin);
         copy_html_button.set_visible(cx, show_copy_html);
         jump_to_related_button.set_visible(cx, show_jump_to_related);
-        self.view.view(ids!(divider_before_report_delete)).set_visible(cx, show_divider_before_report_delete);
+        self.view.view(cx, ids!(divider_before_report_delete)).set_visible(cx, show_divider_before_report_delete);
         // report_button.set_visible(cx, show_report);
         delete_button.set_visible(cx, show_delete);
 
@@ -586,8 +568,8 @@ impl NewMessageContextMenu {
         delete_button.reset_hover(cx);
 
         // Reset reaction input view stuff.
-        self.view.view(ids!(reaction_input_view)).set_visible(cx, false); // hide until the react_button is clicked
-        self.text_input(ids!(reaction_input_view.reaction_text_input)).set_text(cx, "");
+        self.view.view(cx, ids!(reaction_input_view)).set_visible(cx, false); // hide until the react_button is clicked
+        self.text_input(cx, ids!(reaction_input_view.reaction_text_input)).set_text(cx, "");
 
         self.redraw(cx);
 
diff --git a/src/home/room_context_menu.rs b/src/home/room_context_menu.rs
index 1183c3df0..d7137254a 100644
--- a/src/home/room_context_menu.rs
+++ b/src/home/room_context_menu.rs
@@ -8,113 +8,107 @@ use crate::{home::invite_modal::InviteModalAction, shared::popup_list::{PopupKin
 const BUTTON_HEIGHT: f64 = 35.0;
 const MENU_WIDTH: f64 = 215.0;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::*;
 
-    BUTTON_HEIGHT = 35
-    MENU_WIDTH = 215
+    mod.widgets.ROOM_CONTEXT_MENU_BUTTON_HEIGHT = 35
+    mod.widgets.ROOM_CONTEXT_MENU_WIDTH = 215
 
-    ContextMenuButton = <RobrixIconButton> {
-        height: (BUTTON_HEIGHT)
+    mod.widgets.RoomContextMenuButton = RobrixIconButton {
+        height: (mod.widgets.ROOM_CONTEXT_MENU_BUTTON_HEIGHT)
         width: Fill,
         margin: 0,
-        icon_walk: {width: 16, height: 16, margin: {right: 3}}
+        icon_walk: Walk{width: 16, height: 16, margin: Inset{right: 3}}
     }
 
-    pub RoomContextMenu = {{RoomContextMenu}} {
+    mod.widgets.RoomContextMenu = set_type_default() do #(RoomContextMenu::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        cursor: Default,
-        align: {x: 0, y: 0}
+        cursor: MouseCursor.Default,
+        align: Align{x: 0, y: 0}
 
         show_bg: true
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                return vec4(0., 0., 0., 0.3)
-            }
-        }
+        draw_bg.color: #0000004d
 
-        main_content = <RoundedView> {
+        main_content := RoundedView {
             flow: Down
-            width: (MENU_WIDTH),
+            width: (mod.widgets.ROOM_CONTEXT_MENU_WIDTH),
             height: Fit,
             padding: 5
             spacing: 0,
-            align: {x: 0, y: 0}
+            align: Align{x: 0, y: 0}
 
             show_bg: true
-            draw_bg: {
-                color: #fff
+            draw_bg +: {
+                color: instance(#fff)
                 border_radius: 5.0
                 border_size: 0.5
-                border_color: #888
+                border_color: instance(#888)
             }
 
-            mark_unread_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_CHECKMARK) }
+            mark_unread_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: { svg: (ICON_CHECKMARK) }
                 text: "Mark as Unread"
             }
 
-            favorite_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_PIN) }
+            favorite_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: { svg: (ICON_PIN) }
                 text: "Favorite"
             }
 
-            priority_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_TOMBSTONE) } 
+            priority_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: { svg: (ICON_TOMBSTONE) } 
                 text: "Set Low Priority"
             }
 
-            copy_link_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_LINK) }
+            copy_link_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: { svg: (ICON_LINK) }
                 text: "Copy Link to Room"
             }
             
-            divider1 = <LineH> {
-                margin: {top: 3, bottom: 3}
+            divider1 := LineH {
+                margin: Inset{top: 3, bottom: 3}
                 width: Fill,
             }
 
-            room_settings_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_SETTINGS) }
+            room_settings_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: { svg: (ICON_SETTINGS) }
                 text: "Settings"
             }
 
-            notifications_button = <ContextMenuButton> {
+            notifications_button := mod.widgets.RoomContextMenuButton {
                 // TODO: use a proper bell icon
-                draw_icon: { svg_file: (ICON_INFO) }
+                draw_icon +: { svg: (ICON_INFO) }
                 text: "Notifications"
             }
 
-            invite_button = <ContextMenuButton> {
-                draw_icon: { svg_file: (ICON_ADD_USER) }
+            invite_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: { svg: (ICON_ADD_USER) }
                 text: "Invite"
             }
 
-            divider2 = <LineH> {
-                margin: {top: 3, bottom: 3}
+            divider2 := LineH {
+                margin: Inset{top: 3, bottom: 3}
                 width: Fill,
             }
 
-            leave_button = <ContextMenuButton> {
-                draw_icon: {
-                    svg_file: (ICON_LOGOUT)
+            leave_button := mod.widgets.RoomContextMenuButton {
+                draw_icon +: {
+                    svg: (ICON_LOGOUT)
                     color: (COLOR_FG_DANGER_RED),
                 }
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                 }
                 text: "Leave Room"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
             }
@@ -133,14 +127,15 @@ pub struct RoomContextMenuDetails {
 
 /// Actions emitted from the RoomContextMenu widget, as they must be handled
 /// by other widgets with more information (e.g., the RoomsList).
-#[derive(Clone, DefaultNone, Debug)]
+#[derive(Clone, Default, Debug)]
 pub enum RoomContextMenuAction {
     Notifications(OwnedRoomId),
     OpenRoomSettings(OwnedRoomId),
+    #[default]
     None,
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomContextMenu {
     #[deref] view: View,
     #[rust] details: Option<RoomContextMenuDetails>,
@@ -165,7 +160,7 @@ impl Widget for RoomContextMenu {
             || match event.hits_with_capture_overload(cx, area, true) {
                 Hit::KeyUp(key) => key.key_code == KeyCode::Escape,
                 Hit::FingerUp(fue) if fue.is_over => {
-                     !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
+                     !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                  Hit::FingerScroll(_) => true,
                 _ => false,
@@ -186,28 +181,28 @@ impl WidgetMatchEvent for RoomContextMenu {
         let Some(details) = self.details.as_ref() else { return };
         let mut close_menu = false;
         
-        if self.button(ids!(mark_unread_button)).clicked(actions) {
+        if self.button(cx, ids!(mark_unread_button)).clicked(actions) {
             submit_async_request(MatrixRequest::SetUnreadFlag {
                 room_id: details.room_name_id.room_id().clone(),
                 mark_as_unread: !details.is_marked_unread,
             });
             close_menu = true;
         } 
-        else if self.button(ids!(favorite_button)).clicked(actions) {
+        else if self.button(cx, ids!(favorite_button)).clicked(actions) {
             submit_async_request(MatrixRequest::SetIsFavorite {
                 room_id: details.room_name_id.room_id().clone(),
                 is_favorite: !details.is_favorite,
             });
             close_menu = true;
         }
-        else if self.button(ids!(priority_button)).clicked(actions) {
+        else if self.button(cx, ids!(priority_button)).clicked(actions) {
             submit_async_request(MatrixRequest::SetIsLowPriority {
                 room_id: details.room_name_id.room_id().clone(),
                 is_low_priority: !details.is_low_priority,
             });
             close_menu = true;
         }
-        else if self.button(ids!(copy_link_button)).clicked(actions) {
+        else if self.button(cx, ids!(copy_link_button)).clicked(actions) {
             submit_async_request(MatrixRequest::GenerateMatrixLink {
                 room_id: details.room_name_id.room_id().clone(),
                 event_id: None,
@@ -216,7 +211,7 @@ impl WidgetMatchEvent for RoomContextMenu {
             });
             close_menu = true;
         }
-         else if self.button(ids!(room_settings_button)).clicked(actions) {
+         else if self.button(cx, ids!(room_settings_button)).clicked(actions) {
             // TODO: handle/implement this
             enqueue_popup_notification(
                 "The room settings page is not yet implemented.",
@@ -225,7 +220,7 @@ impl WidgetMatchEvent for RoomContextMenu {
             );
             close_menu = true;
         }
-        else if self.button(ids!(notifications_button)).clicked(actions) {
+        else if self.button(cx, ids!(notifications_button)).clicked(actions) {
             // TODO: handle/implement this
             enqueue_popup_notification(
                 "The room notifications page is not yet implemented.",
@@ -234,11 +229,11 @@ impl WidgetMatchEvent for RoomContextMenu {
             );
             close_menu = true;
         }
-        else if self.button(ids!(invite_button)).clicked(actions) {
+        else if self.button(cx, ids!(invite_button)).clicked(actions) {
             cx.action(InviteModalAction::Open(details.room_name_id.clone()));
             close_menu = true;
         }
-        else if self.button(ids!(leave_button)).clicked(actions) {
+        else if self.button(cx, ids!(leave_button)).clicked(actions) {
             use crate::join_leave_room_modal::{JoinLeaveRoomModalAction, JoinLeaveModalKind};
             use crate::room::BasicRoomDetails;
             let room_details = BasicRoomDetails::Name(details.room_name_id.clone());
@@ -269,21 +264,21 @@ impl RoomContextMenu {
     }
     
     fn update_buttons(&mut self, cx: &mut Cx, details: &RoomContextMenuDetails) -> f64 {
-        let mark_unread_button = self.button(ids!(mark_unread_button));
+        let mark_unread_button = self.button(cx, ids!(mark_unread_button));
         if details.is_marked_unread {
             mark_unread_button.set_text(cx, "Mark as Read");
         } else {
             mark_unread_button.set_text(cx, "Mark as Unread");
         }
         
-        let favorite_button = self.button(ids!(favorite_button));
+        let favorite_button = self.button(cx, ids!(favorite_button));
         if details.is_favorite {
             favorite_button.set_text(cx, "Un-favorite");
         } else {
              favorite_button.set_text(cx, "Favorite");
         }
 
-        let priority_button = self.button(ids!(priority_button));
+        let priority_button = self.button(cx, ids!(priority_button));
         if details.is_low_priority {
             priority_button.set_text(cx, "Un-set Low Priority");
         } else {
@@ -294,11 +289,11 @@ impl RoomContextMenu {
         mark_unread_button.reset_hover(cx);
         favorite_button.reset_hover(cx);
         priority_button.reset_hover(cx);
-        self.button(ids!(copy_link_button)).reset_hover(cx);
-        self.button(ids!(room_settings_button)).reset_hover(cx);
-        self.button(ids!(notifications_button)).reset_hover(cx);
-        self.button(ids!(invite_button)).reset_hover(cx);
-        self.button(ids!(leave_button)).reset_hover(cx);
+        self.button(cx, ids!(copy_link_button)).reset_hover(cx);
+        self.button(cx, ids!(room_settings_button)).reset_hover(cx);
+        self.button(cx, ids!(notifications_button)).reset_hover(cx);
+        self.button(cx, ids!(invite_button)).reset_hover(cx);
+        self.button(cx, ids!(leave_button)).reset_hover(cx);
         
         self.redraw(cx);
         
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 60fb7557d..d2bad9726 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -5,6 +5,7 @@ use crate::sliding_sync::TimelineKind;
 use crate::utils::human_readable_list;
 use indexmap::IndexMap;
 use makepad_widgets::*;
+use crate::{LivePtr, widget_ref_from_live_ptr};
 use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, OwnedRoomId};
 use matrix_sdk_ui::timeline::EventTimelineItem;
 
@@ -15,43 +16,40 @@ use std::cmp;
 /// and its accompanying tooltip.
 pub const MAX_VISIBLE_AVATARS_IN_READ_RECEIPT: usize = 3;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::avatar::*;
-    use crate::shared::styles::*;
 
-    pub AvatarRow = {{AvatarRow}} {
-        align: {y: 0.5},
-        avatar_template: <Avatar> {
+    mod.widgets.AvatarRow = #(AvatarRow::register_widget(vm)) {
+        align: Align{y: 0.5},
+        avatar_template: Avatar {
             width: 15.0,
             height: 15.0,
-            text_view = {
-                text = {
-                    draw_text: {
-                        text_style: { font_size: 6.0 }
+            text_view +: {
+                text +: {
+                    draw_text +: {
+                        text_style: theme.font_regular { font_size: 6.0 }
                     }
                 }
             }
         }
-        margin: {top: 5, right: 0},
+        margin: Inset{top: 5, right: 0},
         width: Fit,
         height: 15.0,
-        plus_template: <Label> {
+        plus_template: Label {
             padding: 0,
             flow: Right, // do not wrap
-            draw_text: {
+            draw_text +: {
                 color: #x0,
-                text_style: <TITLE_TEXT>{ font_size: 10}
+                text_style: TITLE_TEXT { font_size: 10}
             }
             text: ""
         }
     }
 }
 /// The widget that displays a list of read receipts.
-#[derive(Live, Widget, LiveHook)]
+#[derive(Script, Widget, ScriptHook)]
 pub struct AvatarRow {
     #[redraw]
     #[live]
@@ -87,7 +85,7 @@ pub struct AvatarRow {
 }
 
 impl Widget for AvatarRow {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, _scope: &mut Scope) {
         let Some(read_receipts) = &self.read_receipts else {
             return;
         };
@@ -102,7 +100,7 @@ impl Widget for AvatarRow {
             | Hit::FingerHoverIn(..) => true,
             Hit::FingerUp(fue) if fue.is_over && fue.is_primary_hit() => true,
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
+                cx.widget_action(uid,  RoomScreenTooltipActions::HoverOut);
                 false
             }
             _ => false,
@@ -110,8 +108,7 @@ impl Widget for AvatarRow {
         if should_hover_in {
             if let Some(read_receipts) = &self.read_receipts {
                 cx.widget_action(
-                    uid,
-                    &scope.path,
+                    uid, 
                     RoomScreenTooltipActions::HoverInReadReceipt {
                         widget_rect,
                         read_receipts: read_receipts.clone(),
@@ -168,11 +165,11 @@ impl AvatarRow {
             self.buttons.clear();
             for _ in 0..cmp::min(MAX_VISIBLE_AVATARS_IN_READ_RECEIPT, receipts_map.len()) {
                 self.buttons.push((
-                    WidgetRef::new_from_ptr(cx, self.avatar_template).as_avatar(),
+                    widget_ref_from_live_ptr(cx, self.avatar_template).as_avatar(),
                     false,
                 ));
             }
-            self.label = Some(WidgetRef::new_from_ptr(cx, self.plus_template).as_label());
+            self.label = Some(widget_ref_from_live_ptr(cx, self.plus_template).as_label());
             self.read_receipts = Some(receipts_map.clone());
         }
         for ((avatar_ref, drawn), (user_id, _)) in
@@ -235,7 +232,7 @@ pub fn populate_read_receipts(
     timeline_kind: &TimelineKind,
     event_tl_item: &EventTimelineItem,
 ) {
-    item.avatar_row(ids!(avatar_row)).set_avatar_row(
+    item.avatar_row(cx, ids!(avatar_row)).set_avatar_row(
         cx,
         timeline_kind,
         event_tl_item.event_id(),
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 352051436..b0a325ad6 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -26,13 +26,13 @@ use matrix_sdk_ui::timeline::{
 use ruma::{OwnedUserId, api::client::receipt::create_receipt::v3::ReceiptType, events::{AnySyncMessageLikeEvent, AnySyncTimelineEvent, SyncMessageLikeEvent}, owned_room_id};
 
 use crate::{
-    app::{AppStateAction, ConfirmDeleteAction, SelectedRoom}, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, room_image_viewer::{get_image_name_and_filesize, populate_matrix_image_modal}, rooms_list::{RoomsListAction, RoomsListRef}, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    app::{AppStateAction, ConfirmDeleteAction, SelectedRoom}, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, event_group::extract_small_state_events, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, room_image_viewer::{get_image_name_and_filesize, populate_matrix_image_modal}, rooms_list::{RoomsListAction, RoomsListRef}, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     },
     room::{BasicRoomDetails, room_input_bar::RoomInputBarState, typing_notice::TypingNoticeWidgetExt},
     shared::{
-        avatar::{AvatarState, AvatarWidgetRefExt}, callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, confirmation_modal::ConfirmationModalContent, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, image_viewer::{ImageViewerAction, ImageViewerMetaData, LoadState}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::{PopupKind, enqueue_popup_notification}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageAction, TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::{AvatarState, AvatarWidgetRefExt}, confirmation_modal::ConfirmationModalContent, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, image_viewer::{ImageViewerAction, ImageViewerMetaData, LoadState}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::{PopupKind, enqueue_popup_notification}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageAction, TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     },
     sliding_sync::{BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineKind, TimelineRequestSender, UserPowerLevels, get_client, submit_async_request, take_timeline_endpoints}, utils::{self, ImageFormat, MEDIA_THUMBNAIL_FORMAT, RoomNameId, unix_time_millis_to_datetime}
 };
@@ -63,110 +63,91 @@ const COLOR_THREAD_SUMMARY_BG: Vec4 = vec4(1.0, 0.957, 0.898, 1.0);
 const COLOR_THREAD_SUMMARY_BG_HOVER: Vec4 = vec4(1.0, 0.918, 0.8, 1.0);
 
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::text_or_image::TextOrImage;
-    use crate::shared::timestamp::*;
-    use crate::shared::html_or_plaintext::*;
-    use crate::shared::icon_button::*;
-    use crate::shared::jump_to_bottom_button::*;
-    use crate::profile::user_profile::UserProfileSlidingPane;
-    use crate::home::edited_indicator::*;
-    use crate::home::event_reaction_list::*;
-    use crate::home::loading_pane::*;
-    use crate::room::room_input_bar::*;
-    use crate::room::reply_preview::RepliedToMessage;
-    use crate::room::typing_notice::*;
-    use crate::home::room_read_receipt::*;
-    use crate::rooms_list::*;
-    use crate::shared::restore_status_view::*;
-    use crate::home::link_preview::LinkPreview;
-    use link::tsp_link::TspSignIndicator;
-
-    COLOR_BG = #xfff8ee
-    COLOR_OVERLAY_BG = #x000000d8
-    COLOR_READ_MARKER = #xeb2733
-
-    REACTION_TEXT_COLOR = #4c00b0
-
-    COLOR_THREAD_SUMMARY_BG = #FFF4E5
-    COLOR_THREAD_SUMMARY_BG_HOVER = #FFEACC
-    COLOR_THREAD_SUMMARY_BORDER = #E8C99A
-    COLOR_THREAD_SUMMARY_REPLY_COUNT = #A35A00
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.COLOR_BG = #xfff8ee
+    mod.widgets.COLOR_OVERLAY_BG = #x000000d8
+    mod.widgets.COLOR_READ_MARKER = #xeb2733
+
+    mod.widgets.REACTION_TEXT_COLOR = #4c00b0
+
+    mod.widgets.COLOR_THREAD_SUMMARY_BG = #FFF4E5
+    mod.widgets.COLOR_THREAD_SUMMARY_BG_HOVER = #FFEACC
+    mod.widgets.COLOR_THREAD_SUMMARY_BORDER = #E8C99A
+    mod.widgets.COLOR_THREAD_SUMMARY_REPLY_COUNT = #A35A00
 
     // An empty view that takes up no space in the portal list.
-    Empty = <View> { }
+    mod.widgets.Empty = View { }
 
     // A summary at the bottom of a message that is the root of a thread.
-    ThreadRootSummary = <RoundedView> {
+    mod.widgets.ThreadRootSummary = RoundedView {
         visible: false
         width: Fill,
         height: Fit
         flow: Right,
-        align: {x: 0.0, y: 0.5}
+        align: Align{x: 0.0, y: 0.5}
         spacing: 5.0
-        margin: { top: 5.0 }
+        margin: Inset{ top: 5.0 }
         padding: 12,
-        cursor: Hand
+        cursor: MouseCursor.Hand
 
         show_bg: true
-        draw_bg: {
-            color: (COLOR_THREAD_SUMMARY_BG)
+        draw_bg +: {
+            color: instance((mod.widgets.COLOR_THREAD_SUMMARY_BG))
             border_radius: 4.0
             border_size: 1.5
-            border_color: (COLOR_THREAD_SUMMARY_BORDER)
+            border_color: instance((mod.widgets.COLOR_THREAD_SUMMARY_BORDER))
         }
 
-        thread_summary_count = <Label> {
+        thread_summary_count := Label {
             width: Fit,
-            draw_text: {
-                text_style: <USERNAME_TEXT_STYLE> { font_size: 11 }
-                color: (COLOR_THREAD_SUMMARY_REPLY_COUNT)
+            draw_text +: {
+                text_style: USERNAME_TEXT_STYLE { font_size: 11 }
+                color: (mod.widgets.COLOR_THREAD_SUMMARY_REPLY_COUNT)
             }
             text: ""
         }
 
-        <Icon> {
+        Icon {
             width: Fit, height: Fit,
-            align: {x: 0.5, y: 0.5}
-            draw_icon: {
-                svg_file: dep("crate://self/resources/icons/double_chat.svg")
-                color: (COLOR_THREAD_SUMMARY_REPLY_COUNT)
+            align: Align{x: 0.5, y: 0.5}
+            draw_icon +: {
+                svg: crate_resource("self://resources/icons/double_chat.svg")
+                color: (mod.widgets.COLOR_THREAD_SUMMARY_REPLY_COUNT)
             }
-            icon_walk: { width: 25, height: 25, margin: {top: 7, right: 7} }
+            icon_walk: Walk{ width: 25, height: 25, margin: Inset{top: 7, right: 7} }
         }
 
-        thread_summary_latest = <MessageHtml> {
+        thread_summary_latest := MessageHtml {
             flow: Right,
         }
     }
 
     // The view used for each text-based message event in a room's timeline.
-    Message = {{Message}} {
+    mod.widgets.Message = set_type_default() do #(Message::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill,
         height: Fit,
         margin: 0.0
         flow: Down,
-        cursor: Default,
+        cursor: MouseCursor.Default,
         padding: 0.0,
         spacing: 0.0
 
         show_bg: true
-        draw_bg: {
-            instance highlight: 0.0
-            instance hover: 0.0
-            color: #ffffff  // default color
+        draw_bg +: {
+            highlight: instance(0.0)
+            hover: instance(0.0)
+            color: uniform(#ffffff) // default color
 
-            instance mentions_bar_color: #ffffff
-            instance mentions_bar_width: 4.0
+            mentions_bar_color: instance(#ffffff)
+            mentions_bar_width: instance(4.0)
 
-            fn pixel(self) -> vec4 {
+            pixel: fn() {
                 let base_color = mix(
                     self.color,
                     #fafafa,
@@ -179,7 +160,7 @@ live_design! {
                     self.highlight
                 );
 
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
 
                 // draw bg
                 sdf.rect(0., 0., self.rect_size.x, self.rect_size.y);
@@ -193,30 +174,30 @@ live_design! {
             }
         }
 
-        animator: {
-            highlight = {
-                default: off
-                off = {
+        animator: Animator{
+            highlight: {
+                default: @off
+                off: AnimatorState{
                     redraw: true,
                     from: { all: Forward {duration: 2.0} }
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: { draw_bg: {highlight: 0.0} }
                 }
-                on = {
+                on: AnimatorState{
                     redraw: true,
                     from: { all: Forward {duration: 0.5} }
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: { draw_bg: {highlight: 1.0} }
                 }
             }
-            hover = {
-                default: off
-                off = {
+            hover: {
+                default: @off
+                off: AnimatorState{
                     redraw: true,
                     from: { all: Snap }
                     apply: { draw_bg: {hover: 0.0} }
                 }
-                on = {
+                on: AnimatorState{
                     redraw: true,
                     from: { all: Snap }
                     apply: { draw_bg: {hover: 1.0} }
@@ -225,136 +206,136 @@ live_design! {
         }
 
         // A preview of the earlier message that this message was in reply to.
-        replied_to_message = <RepliedToMessage> {
+        replied_to_message := mod.widgets.RepliedToMessage {
             flow: Right
-            margin: { bottom: 3, top: 10 }
-            replied_to_message_content = {
-                margin: { left: 29 }
-                padding: { bottom: 10 }
+            margin: Inset{ bottom: 3, top: 10 }
+            replied_to_message_content: {
+                margin: Inset{ left: 29 }
+                padding: Inset{ bottom: 10 }
             }
         }
 
-        body = <View> {
+        body := View {
             width: Fill,
             height: Fit
             flow: Right,
-            padding: {top: 0, bottom: 10, left: 10, right: 10},
+            padding: Inset{top: 0, bottom: 10, left: 10, right: 10},
 
-            profile = <View> {
-                align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
+            profile := View {
+                align: Align{x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 65.0,
                 height: Fit,
-                margin: {top: 4.5, right: 10}
+                margin: Inset{top: 4.5, right: 10}
                 flow: Down,
-                avatar = <Avatar> {
+                avatar := Avatar {
                     width: 48,
                     height: 48,
                 }
-                timestamp = <Timestamp> {
-                    margin: { top: 5.9 }
+                timestamp := Timestamp {
+                    margin: Inset{ top: 5.9 }
                 }
-                edited_indicator = <EditedIndicator> { }
-                tsp_sign_indicator = <TspSignIndicator> { }
+                edited_indicator := EditedIndicator { }
+                tsp_sign_indicator := TspSignIndicator { }
             }
 
-            content = <View> {
+            content := View {
                 width: Fill,
                 height: Fit
                 flow: Down,
                 padding: 0.0
 
-                username_view = <View> {
+                username_view := View {
                     flow: Right,
                     width: Fill,
                     height: Fit,
-                    username = <Label> {
+                    username := Label {
                         width: Fill,
                         flow: Right, // do not wrap
                         padding: 0,
-                        margin: {bottom: 9.0, top: 20.0, right: 10.0,}
-                        draw_text: {
-                            text_style: <USERNAME_TEXT_STYLE> {},
+                        margin: Inset{bottom: 9.0, top: 20.0, right: 10.0,}
+                        draw_text +: {
+                            text_style: USERNAME_TEXT_STYLE {},
                             color: (USERNAME_TEXT_COLOR)
-                            wrap: Ellipsis,
+                            flow: Flow.Right{wrap: true},
                         }
                         text: "<Username not available>"
                     }
                 }
 
-                message = <HtmlOrPlaintext> { }
-                link_preview_view = <LinkPreview> {}
-                <View> {
+                message := HtmlOrPlaintext { }
+                link_preview_view := mod.widgets.LinkPreview {}
+                View {
                     width: Fill,
                     height: Fit
                     flow: Right,
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+                    reaction_list := mod.widgets.ReactionList { }
+                    avatar_row := mod.widgets.AvatarRow {}
                 }
-                thread_root_summary = <ThreadRootSummary> {}
+                thread_root_summary := mod.widgets.ThreadRootSummary {}
             }
         }
     }
 
     // The view used for a condensed message that came right after another message
     // from the same sender, and thus doesn't need to display the sender's profile again.
-    CondensedMessage = <Message> {
-        padding: { top: 2.0, bottom: 2.0 }
-        replied_to_message = <RepliedToMessage> {
-            replied_to_message_content = {
-                margin: { left: 74, bottom: 5.0 }
+    mod.widgets.CondensedMessage = mod.widgets.Message {
+        padding: Inset{ top: 2.0, bottom: 2.0 }
+        replied_to_message := mod.widgets.RepliedToMessage {
+            replied_to_message_content: {
+                margin: Inset{ left: 74, bottom: 5.0 }
             }
         }
-        body = {
-            padding: { top: 0, bottom: 2.5, left: 10.0, right: 10.0 },
-            profile = <View> {
-                align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
+        body: {
+            padding: Inset{ top: 0, bottom: 2.5, left: 10.0, right: 10.0 },
+            profile := View {
+                align: Align{x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 65.0,
                 height: Fit,
                 flow: Down,
-                timestamp = <Timestamp> {
-                    margin: {top: 2.5}
+                timestamp := Timestamp {
+                    margin: Inset{top: 2.5}
                 }
-                edited_indicator = <EditedIndicator> { }
-                tsp_sign_indicator = <TspSignIndicator> { }
+                edited_indicator := EditedIndicator { }
+                tsp_sign_indicator := TspSignIndicator { }
             }
-            content = <View> {
+            content := View {
                 width: Fill,
                 height: Fit,
                 flow: Down,
-                padding: { left: 10.0 }
+                padding: Inset{ left: 10.0 }
 
-                message = <HtmlOrPlaintext> { }
-                link_preview_view = <LinkPreview> {}
-                <View> {
+                message := HtmlOrPlaintext { }
+                link_preview_view := mod.widgets.LinkPreview {}
+                View {
                     width: Fill,
                     height: Fit
                     flow: Right,
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+                    reaction_list := mod.widgets.ReactionList { }
+                    avatar_row := mod.widgets.AvatarRow {}
                 }
-                thread_root_summary = <ThreadRootSummary> {}
+                thread_root_summary := mod.widgets.ThreadRootSummary {}
             }
         }
     }
 
     // The view used for each static image-based message event in a room's timeline.
     // This excludes stickers and other animated GIFs, video clips, audio clips, etc.
-    ImageMessage = <Message> {
-        body = {
-            content = {
+    mod.widgets.ImageMessage = mod.widgets.Message {
+        body: {
+            content: {
                 width: Fill,
                 height: Fit
-                padding: { left: 10.0 }
+                padding: Inset{ left: 10.0 }
 
-                message = <TextOrImage> { }
-                <View> {
+                message := TextOrImage { }
+                View {
                     width: Fill,
                     height: Fit,
                     flow: Right,
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+                    reaction_list := mod.widgets.ReactionList { }
+                    avatar_row := mod.widgets.AvatarRow {}
                 }
-                thread_root_summary = <ThreadRootSummary> {}
+                thread_root_summary := mod.widgets.ThreadRootSummary {}
             }
 
         }
@@ -363,18 +344,18 @@ live_design! {
     // The view used for a condensed image message that came right after another message
     // from the same sender, and thus doesn't need to display the sender's profile again.
     // This excludes stickers and other animated GIFs, video clips, audio clips, etc.
-    CondensedImageMessage = <CondensedMessage> {
-        body = {
-            content = {
-                message = <TextOrImage> { }
-                <View> {
+    mod.widgets.CondensedImageMessage = mod.widgets.CondensedMessage {
+        body: {
+            content: {
+                message := TextOrImage { }
+                View {
                     width: Fill,
                     height: Fit,
                     flow: Right,
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+                    reaction_list := mod.widgets.ReactionList { }
+                    avatar_row := mod.widgets.AvatarRow {}
                 }
-                thread_root_summary = <ThreadRootSummary> {}
+                thread_root_summary := mod.widgets.ThreadRootSummary {}
             }
         }
     }
@@ -382,161 +363,165 @@ live_design! {
 
     // The view used for each state event (non-messages) in a room's timeline.
     // The timestamp, profile picture, and text are all very small.
-    SmallStateEvent = <View> {
+    mod.widgets.SmallStateEvent = View {
         width: Fill,
         height: Fit,
         flow: Right,
-        margin: { top: 4.0, bottom: 4.0}
-        padding: { top: 1.0, bottom: 1.0, right: 10.0 }
+        margin: Inset{ top: 4.0, bottom: 4.0}
+        padding: Inset{ top: 1.0, bottom: 1.0, right: 10.0 }
         spacing: 0.0
-        cursor: Default
+        cursor: MouseCursor.Default
 
-        body = <View> {
+        body := View {
             width: Fill,
             height: Fit
             flow: Right,
-            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
+            padding: Inset{ left: 7.0, top: 2.0, bottom: 2.0 }
             spacing: 5.0
 
-            left_container = <View> {
-                align: {x: 0.5, y: 0}
+            left_container := View {
+                align: Align{x: 0.5, y: 0}
                 width: 70.0,
                 height: Fit
 
-                timestamp = <Timestamp> {
-                    margin: {top: 3}
+                timestamp := Timestamp {
+                    margin: Inset{top: 3}
                 }
             }
 
-            avatar = <Avatar> {
+            avatar := Avatar {
                 width: 19.,
                 height: 19.,
                 margin: 0
 
-                text_view = { text = { draw_text: {
-                    text_style: <TITLE_TEXT>{ font_size: 7.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: TITLE_TEXT { font_size: 7.0 }
+                        }
+                    }
+                }
             }
 
             // Show an invite button only for a `Knocked` room membership change.
             // All other small state events will not show this button.
-            invite_user_button = <RobrixIconButton> {
+            invite_user_button := RobrixIconButton {
                 visible: false
-                margin: { top: -1.5, left: 2, right: 2}
-                padding: {top: 4, bottom: 4, left: 9, right: 9}
-                draw_bg: {
-                    color: (COLOR_BG_ACCEPT_GREEN)
+                margin: Inset{ top: -1.5, left: 2, right: 2}
+                padding: Inset{top: 4, bottom: 4, left: 9, right: 9}
+                draw_bg +: {
+                    color: instance((COLOR_BG_ACCEPT_GREEN))
                     border_size: 0.75
-                    border_color: (COLOR_FG_ACCEPT_GREEN)
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN))
                 }
-                draw_icon: {
-                    svg_file: (ICON_ADD_USER)
+                draw_icon +: {
+                    svg: (ICON_ADD_USER)
                     color: (COLOR_FG_ACCEPT_GREEN)
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_FG_ACCEPT_GREEN)
-                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                    text_style: SMALL_STATE_TEXT_STYLE {},
                 }
-                icon_walk: {width: 15, height: Fit, margin: {right: -4}}
+                icon_walk: Walk{width: 15, height: Fit, margin: Inset{right: -4}}
                 text: "Invite to Room"
             }
 
-            content = <Label> {
+            content := Label {
                 width: Fill,
                 height: Fit
-                margin: {top: 2.5}
-                padding: { top: 0.0, bottom: 0.0, left: 0.0, right: 0.0 }
-                draw_text: {
-                    wrap: Word,
-                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                margin: Inset{top: 2.5}
+                padding: Inset{ top: 0.0, bottom: 0.0, left: 0.0, right: 0.0 }
+                draw_text +: {
+                    flow: Flow.Right{wrap: true},
+                    text_style: SMALL_STATE_TEXT_STYLE {},
                     color: (SMALL_STATE_TEXT_COLOR)
                 }
                 text: ""
             }
 
-            avatar_row = <AvatarRow> {}
+            avatar_row := mod.widgets.AvatarRow {}
         }
     }
 
 
     // The view used for each day divider in a room's timeline.
     // The date text is centered between two horizontal lines.
-    DateDivider = <View> {
+    mod.widgets.DateDivider = View {
         width: Fill,
         height: Fit,
-        margin: {top: 7.0, bottom: 7.0}
+        margin: Inset{top: 7.0, bottom: 7.0}
         flow: Right,
-        padding: {left: 7.0, right: 7.0},
+        padding: Inset{left: 7.0, right: 7.0},
         spacing: 0.0,
-        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
 
-        left_line = <LineH> { }
+        left_line := LineH { }
 
-        date = <Label> {
-            padding: {left: 7.0, right: 7.0}
-            draw_text: {
-                text_style: <TEXT_SUB> {},
+        date := Label {
+            padding: Inset{left: 7.0, right: 7.0}
+            draw_text +: {
+                text_style: TEXT_SUB {},
                 color: (COLOR_DIVIDER_DARK)
             }
             text: "<date>"
         }
 
-        right_line = <LineH> { }
+        right_line := LineH { }
     }
 
     // The view used for the divider indicating where the user's last-viewed message is.
     // This is implemented as a DateDivider with a different color and a fixed text label.
-    ReadMarker = <DateDivider> {
-        left_line = {
-            draw_bg: {color: (COLOR_READ_MARKER)}
+    mod.widgets.ReadMarker = mod.widgets.DateDivider {
+        left_line := LineH {
+            draw_bg +: {color: instance((mod.widgets.COLOR_READ_MARKER))}
         }
 
-        date = {
-            draw_text: {
-                color: (COLOR_READ_MARKER)
+        date := Label {
+            draw_text +: {
+                color: (mod.widgets.COLOR_READ_MARKER)
             }
             text: "New Messages"
         }
 
-        right_line = {
-            draw_bg: {color: (COLOR_READ_MARKER)}
+        right_line := LineH {
+            draw_bg +: {color: instance((mod.widgets.COLOR_READ_MARKER))}
         }
     }
 
 
     // The top space is used to display a loading message while the room is being paginated.
-    TopSpace = <View> {
+    mod.widgets.TopSpace = SolidView {
         visible: false,
         width: Fill,
         height: Fit,
-        align: {x: 0.5, y: 0}
+        align: Align{x: 0.5, y: 0}
         flow: Right,
         show_bg: true,
-        draw_bg: {
-            color: #xDAF5E5F0, // mostly opaque light green
+        draw_bg +: {
+            color: instance(#xDAF5E5F0,) // mostly opaque light green
         }
 
-        label = <Label> {
+        label := Label {
             width: Fill,
             height: Fit,
-            align: {x: 0.5, y: 0.5},
+            align: Align{x: 0.5, y: 0.5},
             flow: Right,
-            padding: { top: 10.0, bottom: 7.0, left: 15.0, right: 15.0 }
-            draw_text: {
-                text_style: <MESSAGE_TEXT_STYLE> { font_size: 10 },
+            padding: Inset{ top: 10.0, bottom: 7.0, left: 15.0, right: 15.0 }
+            draw_text +: {
+                text_style: MESSAGE_TEXT_STYLE { font_size: 10 },
                 color: (TIMESTAMP_TEXT_COLOR)
             }
             text: "Loading earlier messages..."
         }
     }
 
-    Timeline = <View> {
+    mod.widgets.Timeline = View {
         width: Fill,
         height: Fill,
-        align: {x: 0.5, y: 0.0} // center horizontally, align to top vertically
+        align: Align{x: 0.5, y: 0.0} // center horizontally, align to top vertically
         flow: Overlay,
 
-        list = <PortalList> {
+        list := PortalList {
             height: Fill,
             width: Fill
             flow: Down
@@ -545,53 +530,127 @@ live_design! {
             max_pull_down: 0.0, // set to `0.0` to disable the pulldown bounce animation.
 
             // Below, we must place all of the possible templates (views) that can be used in the portal list.
-            Message = <Message> {}
-            CondensedMessage = <CondensedMessage> {}
-            ImageMessage = <ImageMessage> {}
-            CondensedImageMessage = <CondensedImageMessage> {}
-            SmallStateEvent = <SmallStateEvent> {}
-            Empty = <Empty> {}
-            DateDivider = <DateDivider> {}
-            ReadMarker = <ReadMarker> {}
+            Message := mod.widgets.Message {}
+            CondensedMessage := mod.widgets.CondensedMessage {}
+            ImageMessage := mod.widgets.ImageMessage {}
+            CondensedImageMessage := mod.widgets.CondensedImageMessage {}
+            SmallStateEvent := mod.widgets.SmallStateEvent {}
+            SmallStateGroupHeader := mod.prelude.widgets.FoldHeader {
+                header: View{
+                    width: Fill,
+                    height: Fit,
+                    flow: Right,
+                    align: Align{ x: 0.0, y: 0.5 },
+                    margin: Inset{top: 5.0, bottom: 5.0}
+                    spacing: 8.0,
+                    padding: Inset{
+                        left: 7.0,
+                        top: 2.0,
+                        bottom: 2.0,
+                        right: 10.0
+                    }
+                    fold_button := FoldButton {
+                        width: 25, height: 25
+                        draw_bg +: {
+                            color: uniform(#555)
+                            color_hover: uniform(#333)
+                            color_active: uniform(#444)
+                            // Make triangle larger
+                            pixel: fn() {
+                                let sz = 5.0
+                                let c = vec2(self.rect_size.x * 0.5, self.rect_size.y * 0.5)
+                                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+                                sdf.clear(vec4(0.))
+                                sdf.rotate(self.active * 0.5 * PI + 0.5 * PI, c.x, c.y)
+                                sdf.move_to(c.x - sz, c.y + sz)
+                                sdf.line_to(c.x, c.y - sz)
+                                sdf.line_to(c.x + sz, c.y + sz)
+                                sdf.close_path()
+                                sdf.fill(
+                                    mix(
+                                        mix(self.color, self.color_hover, self.hover)
+                                        mix(self.color_active, self.color_hover, self.hover)
+                                        self.active
+                                    )
+                                )
+                                return sdf.result * self.fade
+                            }
+                        }
+                    }
+                    user_event_avatar_row := mod.widgets.AvatarRow {
+                        margin: Inset{
+                            left: 5.0,
+                            top: 0.0
+                        }
+                    }
+                    summary_text := Label {
+                        width: Fill, height: Fit
+                        flow: Flow.Right{wrap: true},
+                        draw_text+: {
+                            wrap: Line,
+                            color: (SMALL_STATE_TEXT_COLOR),
+                            text_style: SMALL_STATE_TEXT_COLOR { font_size: 11 },
+                        }
+                    }
+                }
+                body: View{
+                    width: Fill,
+                    height: Fit
+                    flow: Down
+                    padding: Inset{ left: 30.0 }
+                    PortalList{
+                        height: Fit, width: Fill
+                        SmallStateEvent := mod.widgets.SmallStateEvent {}
+                        CondensedMessage := mod.widgets.CondensedMessage {}
+                        Message := mod.widgets.Message {}
+                    }
+                }
+            }
+            Empty := mod.widgets.Empty {}
+            DateDivider := mod.widgets.DateDivider {}
+            ReadMarker := mod.widgets.ReadMarker {}
+            BottomSpace := View {
+                height: 100.0
+                width: Fill
+            }
         }
 
         // A jump to bottom button (with an unread message badge) that is shown
         // when the timeline is not at the bottom.
-        jump_to_bottom_button = <JumpToBottomButton> { }
+        jump_to_bottom_button := JumpToBottomButton { }
     }
 
 
-    pub RoomScreen = {{RoomScreen}} {
+    mod.widgets.RoomScreen = #(RoomScreen::register_widget(vm)) {
         width: Fill, height: Fill,
-        cursor: Default,
+        cursor: MouseCursor.Default,
         flow: Down,
         spacing: 0.0
 
-        room_screen_wrapper = <View> {
+        room_screen_wrapper := SolidView {
             width: Fill, height: Fill,
             flow: Overlay,
+
             show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY_DARKER)
-            }
+            draw_bg.color: (COLOR_PRIMARY_DARKER)
 
-            restore_status_view = <RestoreStatusView> {}
+            restore_status_view := RestoreStatusView {}
 
             // Widgets within this view will get shifted upwards when the on-screen keyboard is shown.
-            keyboard_view = <KeyboardView> {
+            keyboard_view := KeyboardView {
                 width: Fill, height: Fill,
                 flow: Down,
 
                 // First, display the timeline of all messages/events.
-                timeline = <Timeline> {
-                    // margin: {bottom: 10}
+                timeline := mod.widgets.Timeline {
+                    // margin: Inset{bottom: 10}
                 }
 
                 // Below that, display a typing notice when other users in the room are typing.
-                typing_notice = <TypingNotice> { }
+                typing_notice := TypingNotice { }
 
-                room_input_bar = <RoomInputBar> {
-                    // margin: {top: 20}
+                room_input_bar := RoomInputBar {
+                    // margin: Inset{top: 20}
                 }
             }
 
@@ -599,32 +658,32 @@ live_design! {
             // so the order that we define the below views determines which one is on top.
 
             // The top space should be displayed as an overlay at the top of the timeline.
-            top_space = <TopSpace> { }
+            top_space := mod.widgets.TopSpace { }
 
             // The user profile sliding pane should be displayed on top of other "static" subviews
             // (on top of all other views that are always visible).
-            user_profile_sliding_pane = <UserProfileSlidingPane> { }
+            user_profile_sliding_pane := mod.widgets.UserProfileSlidingPane { }
 
             // The loading pane appears while the user is waiting for something in the room screen
             // to finish loading, e.g., when loading an older replied-to message.
-            loading_pane = <LoadingPane> { }
+            loading_pane := LoadingPane { }
 
 
             /*
              * TODO: add the action bar back in as a series of floating buttons.
              *
-            message_action_bar_popup = <PopupNotification> {
-                align: {x: 0.0, y: 0.0}
+            message_action_bar_popup := PopupNotification {
+                align: Align{x: 0.0, y: 0.0}
                 content: {
                     height: Fit,
                     width: Fit,
                     show_bg: false,
-                    align: {
+                    align: Align{
                         x: 0.5,
                         y: 0.5
                     }
 
-                    message_action_bar = <MessageActionBar> {}
+                    message_action_bar := MessageActionBar {}
                 }
             }
             */
@@ -633,7 +692,7 @@ live_design! {
 }
 
 /// The main widget that displays a single Matrix room.
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomScreen {
     #[deref] view: View,
 
@@ -657,27 +716,16 @@ impl Drop for RoomScreen {
         // and that other RoomScreen instances can show this room in the future.
         // RoomScreen will be dropped whenever its widget instance is destroyed, e.g.,
         // when a Tab is closed or the app is resized to a different AdaptiveView layout.
-        self.hide_timeline();
+        self.timeline_kind = None;
     }
 }
-impl LiveHook for RoomScreen {
-    fn after_update_from_doc(&mut self, cx: &mut Cx) {
-        if let Some(tl_state) = &mut self.tl_state.as_mut() {
-            // Clear the timeline's drawn items caches and redraw it.
-            tl_state.content_drawn_since_last_update.clear();
-            tl_state.profile_drawn_since_last_update.clear();
-            self.view.redraw(cx);
-        }
-    }
-}
-
 impl Widget for RoomScreen {
     // Handle events and actions for the RoomScreen widget and its inner Timeline view.
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let room_screen_widget_uid = self.widget_uid();
-        let portal_list = self.portal_list(ids!(timeline.list));
-        let user_profile_sliding_pane = self.user_profile_sliding_pane(ids!(user_profile_sliding_pane));
-        let loading_pane = self.loading_pane(ids!(loading_pane));
+        let portal_list = self.portal_list(cx, ids!(timeline.list));
+        let user_profile_sliding_pane = self.user_profile_sliding_pane(cx, ids!(user_profile_sliding_pane));
+        let loading_pane = self.loading_pane(cx, ids!(loading_pane));
 
         // Handle actions here before processing timeline updates.
         // Normally (in most other widgets), the order of event handling doesn't matter much.
@@ -687,7 +735,7 @@ impl Widget for RoomScreen {
         if let Event::Actions(actions) = event {
             for (index, wr) in portal_list.items_with_actions(actions) {
                 // Handle a hover-in action on the reaction list: show a reaction summary.
-                let reaction_list = wr.reaction_list(ids!(reaction_list));
+                let reaction_list = wr.reaction_list(cx, ids!(reaction_list));
                 if let RoomScreenTooltipActions::HoverInReactionButton {
                     widget_rect,
                     reaction_data,
@@ -710,8 +758,7 @@ impl Widget for RoomScreen {
                     let mut tooltip_text = utils::human_readable_list(&tooltip_text_arr, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT);
                     tooltip_text.push_str(&format!(" reacted with: {}", reaction_data.reaction));
                     cx.widget_action(
-                        room_screen_widget_uid,
-                        &scope.path,
+                        room_screen_widget_uid, 
                         TooltipAction::HoverIn {
                             text: tooltip_text,
                             widget_rect,
@@ -724,13 +771,12 @@ impl Widget for RoomScreen {
                 }
 
                 // Handle a hover-out action on the reaction list or avatar row.
-                let avatar_row_ref = wr.avatar_row(ids!(avatar_row));
+                let avatar_row_ref = wr.avatar_row(cx, ids!(avatar_row));
                 if reaction_list.hovered_out(actions)
                     || avatar_row_ref.hover_out(actions)
                 {
                     cx.widget_action(
-                        room_screen_widget_uid,
-                        &scope.path,
+                        room_screen_widget_uid, 
                         TooltipAction::HoverOut,
                     );
                 }
@@ -743,8 +789,7 @@ impl Widget for RoomScreen {
                     let Some(room_id) = self.room_id() else { return; };
                     let tooltip_text= room_read_receipt::populate_tooltip(cx, read_receipts, room_id);
                     cx.widget_action(
-                        room_screen_widget_uid,
-                        &scope.path,
+                        room_screen_widget_uid, 
                         TooltipAction::HoverIn {
                             text: tooltip_text,
                             widget_rect,
@@ -757,7 +802,7 @@ impl Widget for RoomScreen {
                 }
 
                 // Handle an image within the message being clicked.
-                let content_message = wr.text_or_image(ids!(content.message));
+                let content_message = wr.text_or_image(cx, ids!(content.message));
                 if let TextOrImageAction::Clicked(mxc_uri) = actions.find_widget_action(content_message.widget_uid()).cast() {
                     let texture = content_message.get_texture(cx);
                     self.handle_image_click(
@@ -770,7 +815,7 @@ impl Widget for RoomScreen {
                 }
 
                 // Handle the invite_user_button (in a SmallStateEvent) being clicked.
-                if wr.button(ids!(invite_user_button)).clicked(actions) {
+                if wr.button(cx, ids!(invite_user_button)).clicked(actions) {
                     let Some(tl) = self.tl_state.as_ref() else { continue };
                     if let Some(event_tl_item) = tl.items.get(index).and_then(|item| item.as_event()) {
                         log!("invite_user_button clicked: index {index}, details: {:?}", event_tl_item);
@@ -837,8 +882,7 @@ impl Widget for RoomScreen {
                 if let MessageHighlightAnimationState::Pending { item_id } = tl.message_highlight_animation_state {
                     if portal_list.smooth_scroll_reached(actions) {
                         cx.widget_action(
-                            room_screen_widget_uid,
-                            &scope.path,
+                            room_screen_widget_uid, 
                             MessageAction::HighlightMessage(item_id),
                         );
                         tl.message_highlight_animation_state = MessageHighlightAnimationState::Off;
@@ -851,7 +895,7 @@ impl Widget for RoomScreen {
             /*
             // close message action bar if scrolled.
             if portal_list.scrolled(actions) {
-                let message_action_bar_popup = self.popup_notification(ids!(message_action_bar_popup));
+                let message_action_bar_popup = self.popup_notification(cx, ids!(message_action_bar_popup));
                 message_action_bar_popup.close(cx);
             }
             */
@@ -862,7 +906,7 @@ impl Widget for RoomScreen {
             self.send_user_read_receipts_based_on_scroll_pos(cx, actions, &portal_list);
 
             // Handle the jump to bottom button: update its visibility, and handle clicks.
-            self.jump_to_bottom_button(ids!(jump_to_bottom_button)).update_from_actions(
+            self.jump_to_bottom_button(cx, ids!(jump_to_bottom_button)).update_from_actions(
                 cx,
                 &portal_list,
                 actions,
@@ -1019,8 +1063,8 @@ impl Widget for RoomScreen {
                 /*
                 match action.as_widget_action().widget_uid_eq(room_screen_widget_uid).cast() {
                     MessageAction::ActionBarClose => {
-                        let message_action_bar_popup = self.popup_notification(ids!(message_action_bar_popup));
-                        let message_action_bar = message_action_bar_popup.message_action_bar(ids!(message_action_bar));
+                        let message_action_bar_popup = self.popup_notification(cx, ids!(message_action_bar_popup));
+                        let message_action_bar = message_action_bar_popup.message_action_bar(cx, ids!(message_action_bar));
 
                         // close only if the active message is requesting it to avoid double closes.
                         if let Some(message_widget_uid) = message_action_bar.message_widget_uid() {
@@ -1030,8 +1074,8 @@ impl Widget for RoomScreen {
                         }
                     }
                     MessageAction::ActionBarOpen { item_id, message_rect } => {
-                        let message_action_bar_popup = self.popup_notification(ids!(message_action_bar_popup));
-                        let message_action_bar = message_action_bar_popup.message_action_bar(ids!(message_action_bar));
+                        let message_action_bar_popup = self.popup_notification(cx, ids!(message_action_bar_popup));
+                        let message_action_bar = message_action_bar_popup.message_action_bar(cx, ids!(message_action_bar));
 
                         let margin_x = 50.;
 
@@ -1072,7 +1116,7 @@ impl Widget for RoomScreen {
                 // No room selected yet, nothing to show.
                 return DrawStep::done();
             };
-            let mut restore_status_view = self.view.restore_status_view(ids!(restore_status_view));
+            let mut restore_status_view = self.view.restore_status_view(cx, ids!(restore_status_view));
             restore_status_view.set_content(cx, self.all_rooms_loaded, room_name);
             return restore_status_view.draw(cx, scope);
         }
@@ -1105,6 +1149,46 @@ impl Widget for RoomScreen {
             while let Some(item_id) = list.next_visible_item(cx) {
                 let item = {
                     let tl_idx = item_id;
+                    if let Some(group_range) = tl_state.small_state_group_manager.check_group_range(item_id) {
+                        if group_range.start == item_id {
+                            // This is the first item of a group - render FoldHeader
+                            if let (Some(group), Some(timeline_kind)) = (tl_state.small_state_group_manager.get_group_at_item_id(item_id), &self.timeline_kind) {
+                                populate_small_state_group_header(
+                                    cx,
+                                    scope,
+                                    walk,
+                                    list,
+                                    item_id,
+                                    timeline_kind,
+                                    &group_range,
+                                    group,
+                                    tl_items,
+                                    &mut tl_state.content_drawn_since_last_update,
+                                    &mut tl_state.profile_drawn_since_last_update,
+                                    &mut tl_state.media_cache,
+                                    &mut tl_state.link_preview_cache,
+                                    &tl_state.fetched_thread_summaries,
+                                    &mut tl_state.pending_thread_summary_fetches,
+                                    &tl_state.user_power,
+                                    &self.pinned_events,
+                                    room_screen_widget_uid,
+                                );
+                            } else {
+                                let item = list.item(cx, item_id, id!(Empty));
+                                item.draw_all(cx, scope);
+                            }
+                            continue;
+                        } else if group_range.contains(&item_id) {
+                            let item = list.item(cx, item_id, id!(Empty));
+                            item.draw_all(cx, scope);
+                            continue;
+                        }
+                    }
+                    if item_id > tl_items.len() {
+                        let item = list.item(cx, item_id, id!(BottomSpace));
+                        item.draw_all(cx, scope);
+                        continue;
+                    }
                     let Some(timeline_item) = tl_items.get(tl_idx) else {
                         // This shouldn't happen (unless the timeline gets corrupted or some other weird error),
                         // but we can always safely fill the item with an empty widget that takes up no space.
@@ -1211,7 +1295,7 @@ impl Widget for RoomScreen {
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
-                                item.label(ids!(content)).set_text(cx, &format!("[Unsupported] {:?}", unhandled));
+                                item.label(cx, ids!(content)).set_text(cx, &format!("[Unsupported] {:?}", unhandled));
                                 (item, ItemDrawnStatus::both_drawn())
                             }
                         }
@@ -1221,7 +1305,7 @@ impl Widget for RoomScreen {
                                 // format the time as a shortened date (Sat, Sept 5, 2021)
                                 .map(|dt| format!("{}", dt.date_naive().format("%a %b %-d, %Y")))
                                 .unwrap_or_else(|| format!("{:?}", millis));
-                            item.label(ids!(date)).set_text(cx, &text);
+                            item.label(cx, ids!(date)).set_text(cx, &text);
                             (item, ItemDrawnStatus::both_drawn())
                         }
                         TimelineItemKind::Virtual(VirtualTimelineItem::ReadMarker) => {
@@ -1270,8 +1354,8 @@ impl RoomScreen {
     ///
     /// Redraws this RoomScreen view if any updates were applied.
     fn process_timeline_updates(&mut self, cx: &mut Cx, portal_list: &PortalListRef) {
-        let top_space = self.view(ids!(top_space));
-        let jump_to_bottom_button = self.jump_to_bottom_button(ids!(jump_to_bottom_button));
+        let top_space = self.view(cx, ids!(top_space));
+        let jump_to_bottom_button = self.jump_to_bottom_button(cx, ids!(jump_to_bottom_button));
         let curr_first_id = portal_list.first_id();
         let ui = self.widget_uid();
         let Some(tl) = self.tl_state.as_mut() else { return };
@@ -1294,6 +1378,8 @@ impl RoomScreen {
 
                     tl.items = initial_items;
                     done_loading = true;
+                    let small_state_events = extract_small_state_events(tl.items.iter().cloned());
+                    tl.small_state_group_manager.compute_group_state(small_state_events);
                 }
                 TimelineUpdate::NewItems { new_items, changed_indices, is_append, clear_cache } => {
                     if new_items.is_empty() {
@@ -1355,7 +1441,7 @@ impl RoomScreen {
                             // Set scrolled_past_read_marker false when we jump to a new event
                             tl.scrolled_past_read_marker = false;
                             // Hide the tooltip when the timeline jumps, as a hover-out event won't occur.
-                            cx.widget_action(ui, &HeapLiveIdPath::default(), RoomScreenTooltipActions::HoverOut);
+                            cx.widget_action(ui,  RoomScreenTooltipActions::HoverOut);
                         }
                     }
                     //
@@ -1383,7 +1469,7 @@ impl RoomScreen {
                         // then we should update the status message in that loading pane
                         // and then continue paginating backwards until we find the target event.
                         // Note that we do this here because `clear_cache` will always be true if backwards pagination occurred.
-                        let loading_pane = self.view.loading_pane(ids!(loading_pane));
+                        let loading_pane = self.view.loading_pane(cx, ids!(loading_pane));
                         let mut loading_pane_state = loading_pane.take_state();
                         if let LoadingPaneState::BackwardsPaginateUntilEvent {
                             events_paginated, target_event_id, ..
@@ -1411,6 +1497,8 @@ impl RoomScreen {
                         // log!("process_timeline_updates(): changed_indices: {changed_indices:?}, items len: {}\ncontent drawn: {:#?}\nprofile drawn: {:#?}", items.len(), tl.content_drawn_since_last_update, tl.profile_drawn_since_last_update);
                     }
                     tl.items = new_items;
+                    let small_state_events = extract_small_state_events(tl.items.iter().cloned());
+                    tl.small_state_group_manager.compute_group_state(small_state_events);
                     done_loading = true;
                 }
                 TimelineUpdate::NewUnreadMessagesCount(unread_messages_count) => {
@@ -1434,7 +1522,7 @@ impl RoomScreen {
                         item.as_event()
                             .is_some_and(|ev| ev.event_id() == Some(&target_event_id))
                     );
-                    let loading_pane = self.view.loading_pane(ids!(loading_pane));
+                    let loading_pane = self.view.loading_pane(cx, ids!(loading_pane));
 
                     // log!("TargetEventFound: is_valid? {is_valid}. room {}, event {target_event_id}, index {index} of {}\n  --> item: {item:?}", tl.kind.room_id(), tl.items.len());
                     if is_valid {
@@ -1554,7 +1642,7 @@ impl RoomScreen {
                     // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
                 }
                 TimelineUpdate::MessageEdited { timeline_event_item_id: timeline_event_id, result } => {
-                    self.view.room_input_bar(ids!(room_input_bar))
+                    self.view.room_input_bar(cx, ids!(room_input_bar))
                         .handle_edit_result(cx, timeline_event_id, result);
                 }
                 TimelineUpdate::PinResult { result, pin, .. } => {
@@ -1596,7 +1684,7 @@ impl RoomScreen {
                 }
                 TimelineUpdate::UserPowerLevels(user_power_levels) => {
                     tl.user_power = user_power_levels;
-                    self.view.room_input_bar(ids!(room_input_bar))
+                    self.view.room_input_bar(cx, ids!(room_input_bar))
                         .update_user_power_levels(cx, user_power_levels);
                     // Update the @room mention capability based on the user's power level
                     cx.action(MentionableTextInputAction::PowerLevelsUpdated {
@@ -1612,7 +1700,7 @@ impl RoomScreen {
                     tl.latest_own_user_receipt = Some(receipt);
                 }
                 TimelineUpdate::Tombstoned(successor_room_details) => {
-                    self.view.room_input_bar(ids!(room_input_bar))
+                    self.view.room_input_bar(cx, ids!(room_input_bar))
                         .update_tombstone_footer(cx, tl.kind.room_id(), Some(&successor_room_details));
                     tl.tombstone_info = Some(successor_room_details);
                 }
@@ -1634,7 +1722,7 @@ impl RoomScreen {
 
         if let Some(users) = typing_users {
             self.view
-                .typing_notice(ids!(typing_notice))
+                .typing_notice(cx, ids!(typing_notice))
                 .show_or_hide(cx, &users);
         }
 
@@ -1850,7 +1938,7 @@ impl RoomScreen {
                     let Some(tl) = self.tl_state.as_ref() else { return };
                     if let Some(event_tl_item) = Self::find_event_in_timeline(&tl.items, details).cloned() {
                         let replied_to_info = EmbeddedEvent::from_timeline_item(&event_tl_item);
-                        self.view.room_input_bar(ids!(room_input_bar))
+                        self.view.room_input_bar(cx, ids!(room_input_bar))
                             .show_replying_to(cx, (event_tl_item, replied_to_info), &tl.kind);
                     }
                     else {
@@ -1869,7 +1957,7 @@ impl RoomScreen {
                 MessageAction::Edit(details) => {
                     let Some(tl) = self.tl_state.as_ref() else { return };
                     if let Some(event_tl_item) = Self::find_event_in_timeline(&tl.items, details) {
-                        self.view.room_input_bar(ids!(room_input_bar))
+                        self.view.room_input_bar(cx, ids!(room_input_bar))
                             .show_editing_pane(
                                 cx,
                                 event_tl_item.clone(),
@@ -1897,7 +1985,7 @@ impl RoomScreen {
                         .take(MAX_ITEMS_TO_SEARCH_THROUGH)
                         .find_map(|item| item.as_event().filter(|ev| ev.is_editable()).cloned())
                     {
-                        self.view.room_input_bar(ids!(room_input_bar))
+                        self.view.room_input_bar(cx, ids!(room_input_bar))
                             .show_editing_pane(
                                 cx,
                                 latest_sent_msg,
@@ -2070,12 +2158,11 @@ impl RoomScreen {
                 }
                 MessageAction::OpenThread(thread_root_event_id) => {
                     let Some(room_name_id) = self.room_name_id.as_ref().cloned() else {
-                        error!("### ERROR: MessageAction::OpenThread: thread_root_event_id={thread_root_event_id}, but room_name_id was None!");
+                        error!("### ERROR: MessageAction::OpenThread: thread_root_event_id: {thread_root_event_id}, but room_name_id was None!");
                         continue
                     };
                     cx.widget_action(
-                        room_screen_widget_uid,
-                        &HeapLiveIdPath::default(),
+                        room_screen_widget_uid, 
                         RoomsListAction::Selected(SelectedRoom::Thread {
                             room_name_id,
                             thread_root_event_id: thread_root_event_id.clone(),
@@ -2286,6 +2373,7 @@ impl RoomScreen {
                 scrolled_past_read_marker: false,
                 latest_own_user_receipt: None,
                 tombstone_info,
+                small_state_group_manager: crate::home::event_group::SmallStateGroupManager::default(),
             };
             (tl_state, true)
         };
@@ -2310,7 +2398,7 @@ impl RoomScreen {
             self.is_loaded = is_loaded_now;
         }
 
-        self.view.restore_status_view(ids!(restore_status_view)).set_visible(cx, !self.is_loaded);
+        self.view.restore_status_view(cx, ids!(restore_status_view)).set_visible(cx, !self.is_loaded);
 
         // Kick off a back pagination request if it's the first time loading this room,
         // because we want to show the user some messages as soon as possible
@@ -2334,7 +2422,7 @@ impl RoomScreen {
         }
 
         // Hide the typing notice view initially.
-        self.view(ids!(typing_notice)).set_visible(cx, false);
+        self.view(cx, ids!(typing_notice)).set_visible(cx, false);
         // If the room is loaded, we need to get a few key states:
         // 1. Get the current user's power levels for this room so that we can
         //    show/hide UI elements based on the user's permissions.
@@ -2379,16 +2467,16 @@ impl RoomScreen {
 
         // Now that we have restored the TimelineUiState into this RoomScreen widget,
         // we can proceed to processing pending background updates.
-        self.process_timeline_updates(cx, &self.portal_list(ids!(list)));
+        self.process_timeline_updates(cx, &self.portal_list(cx, ids!(list)));
 
         self.redraw(cx);
     }
 
     /// Invoke this when this RoomScreen/timeline is being hidden or no longer being shown.
-    fn hide_timeline(&mut self) {
+    fn hide_timeline(&mut self, cx: &mut Cx) {
         let Some(timeline_kind) = self.timeline_kind.clone() else { return };
 
-        self.save_state();
+        self.save_state(cx);
 
         // When closing a room view, we do the following with non-persistent states.
         // (This should be the inverse of what's done in `show_timeline()`.)
@@ -2416,16 +2504,16 @@ impl RoomScreen {
     /// and saves it to the map of `TIMELINE_STATES` such that it can be restored later.
     ///
     /// Note: after calling this function, the widget's `tl_state` will be `None`.
-    fn save_state(&mut self) {
+    fn save_state(&mut self, cx: &mut Cx) {
         let Some(mut tl) = self.tl_state.take() else {
             error!("Timeline::save_state(): skipping due to missing state, room {:?}", self.room_name_id);
             return;
         };
 
-        let portal_list = self.portal_list(ids!(list));
+        let portal_list = self.portal_list(cx, ids!(list));
         let state = SavedState {
             first_index_and_scroll: Some((portal_list.first_id(), portal_list.scroll_position())),
-            room_input_bar_state: self.room_input_bar(ids!(room_input_bar)).save_state(),
+            room_input_bar_state: self.room_input_bar(cx, ids!(room_input_bar)).save_state(cx),
         };
         tl.saved_state = state;
         // Clear room_members to avoid wasting memory (in case this room is never re-opened).
@@ -2445,16 +2533,16 @@ impl RoomScreen {
         } = &mut tl_state.saved_state;
         // 1. Restore the position of the timeline.
         if let Some((first_index, scroll_from_first_id)) = first_index_and_scroll {
-            self.portal_list(ids!(timeline.list))
+            self.portal_list(cx, ids!(timeline.list))
                 .set_first_id_and_scroll(*first_index, *scroll_from_first_id);
         } else {
             // If the first index is not set, then the timeline has not yet been scrolled by the user,
             // so we set the portal list to "tail" (track) the bottom of the list.
-            self.portal_list(ids!(timeline.list)).set_tail_range(true);
+            self.portal_list(cx, ids!(timeline.list)).set_tail_range(true);
         }
 
         // 2. Restore the state of the room input bar.
-        let room_input_bar = self.view.room_input_bar(ids!(room_input_bar));
+        let room_input_bar = self.view.room_input_bar(cx, ids!(room_input_bar));
         let saved_room_input_bar_state = std::mem::take(room_input_bar_state);
         room_input_bar.restore_state(
             cx,
@@ -2490,9 +2578,9 @@ impl RoomScreen {
             return;
         }
 
-        self.hide_timeline();
+        self.hide_timeline(cx);
         // Reset the the state of the inner loading pane.
-        self.loading_pane(ids!(loading_pane)).take_state();
+        self.loading_pane(cx, ids!(loading_pane)).take_state();
 
         self.room_name_id = Some(room_name_id.clone());
         self.timeline_kind = Some(timeline_kind.clone());
@@ -2635,7 +2723,7 @@ pub struct RoomScreenProps {
 
 
 /// Actions for the room screen's tooltip.
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum RoomScreenTooltipActions {
     /// Mouse over event when the mouse is over the read receipt.
     HoverInReadReceipt {
@@ -2653,6 +2741,7 @@ pub enum RoomScreenTooltipActions {
     },
     /// Mouse out event and clear tooltip.
     HoverOut,
+    #[default]
     None,
 }
 
@@ -2877,6 +2966,8 @@ struct TimelineUiState {
     /// If `Some`, this room has been tombstoned and the details of its successor room
     /// are contained within. If `None`, the room has not been tombstoned.
     tombstone_info: Option<SuccessorRoomDetails>,
+    /// Manager for small state event groups that can be collapsed/expanded.
+    small_state_group_manager: crate::home::event_group::SmallStateGroupManager,
 }
 
 #[derive(Default, Debug)]
@@ -3013,7 +3104,6 @@ fn populate_message_view(
     let mut new_drawn_status = item_drawn_status;
     let ts_millis = event_tl_item.timestamp();
 
-    let mut is_notice = false; // whether this message is a Notice
     let mut is_server_notice = false; // whether this message is a Server Notice
 
     // Determine whether we can use a more compact UI view that hides the user's profile info
@@ -3051,12 +3141,16 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
+                        let mut link_preview_ref =
+                            item.link_preview(cx, ids!(content.link_preview_view));
                         new_drawn_status.content_drawn = populate_text_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             body,
                             formatted.as_ref(),
-                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
+                            Some(&mut link_preview_ref),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3066,7 +3160,6 @@ fn populate_message_view(
                 // A notice message is just a message sent by an automated bot,
                 // so we treat it just like a message but use a different font color.
                 MessageType::Notice(NoticeMessageEventContent{body, formatted, ..}) => {
-                    is_notice = true;
                     has_html_body = formatted.as_ref().is_some_and(|f| f.format == MessageFormat::Html);
                     let template = if use_compact_view {
                         id!(CondensedMessage)
@@ -3077,24 +3170,15 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
-                        let html_or_plaintext_ref = item.html_or_plaintext(ids!(content.message));
-                        html_or_plaintext_ref.apply_over(cx, live!(
-                            html_view = {
-                                html = {
-                                    font_color: (COLOR_MESSAGE_NOTICE_TEXT),
-                                    draw_normal:      { color: (COLOR_MESSAGE_NOTICE_TEXT), }
-                                    draw_italic:      { color: (COLOR_MESSAGE_NOTICE_TEXT), }
-                                    draw_bold:        { color: (COLOR_MESSAGE_NOTICE_TEXT), }
-                                    draw_bold_italic: { color: (COLOR_MESSAGE_NOTICE_TEXT), }
-                                }
-                            }
-                        ));
+                        let html_or_plaintext_ref = item.html_or_plaintext(cx, ids!(content.message));
+                        let mut link_preview_ref =
+                            item.link_preview(cx, ids!(content.link_preview_view));
                         new_drawn_status.content_drawn = populate_text_message_content(
                             cx,
                             &html_or_plaintext_ref,
                             body,
                             formatted.as_ref(),
-                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
+                            Some(&mut link_preview_ref),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3108,18 +3192,7 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
-                        let html_or_plaintext_ref = item.html_or_plaintext(ids!(content.message));
-                        html_or_plaintext_ref.apply_over(cx, live!(
-                            html_view = {
-                                html = {
-                                    font_color: (COLOR_FG_DANGER_RED),
-                                    draw_normal:      { color: (COLOR_FG_DANGER_RED), }
-                                    draw_italic:      { color: (COLOR_FG_DANGER_RED), }
-                                    draw_bold:        { color: (COLOR_FG_DANGER_RED), }
-                                    draw_bold_italic: { color: (COLOR_FG_DANGER_RED), }
-                                }
-                            }
-                        ));
+                        let html_or_plaintext_ref = item.html_or_plaintext(cx, ids!(content.message));
                         let formatted = format!(
                             "<b>Server notice:</b> {}\n\n<i>Notice type:</i>: {}{}{}",
                             sn.body,
@@ -3131,6 +3204,8 @@ fn populate_message_view(
                                 .map(|c| format!("\n<i>Admin contact:</i> {}", c))
                                 .unwrap_or_default(),
                         );
+                        let mut link_preview_ref =
+                            item.link_preview(cx, ids!(content.link_preview_view));
                         new_drawn_status.content_drawn = populate_text_message_content(
                             cx,
                             &html_or_plaintext_ref,
@@ -3139,7 +3214,7 @@ fn populate_message_view(
                                 format: MessageFormat::Html,
                                 body: formatted,
                             }),
-                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
+                            Some(&mut link_preview_ref),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3160,7 +3235,7 @@ fn populate_message_view(
                         (item, true)
                     } else {
                         // Draw the profile up front here because we need the username for the emote body.
-                        let (username, profile_drawn) = item.avatar(ids!(profile.avatar)).set_avatar_and_get_username(
+                        let (username, profile_drawn) = item.avatar(cx, ids!(profile.avatar)).set_avatar_and_get_username(
                             cx,
                             timeline_kind,
                             event_tl_item.sender(),
@@ -3181,12 +3256,16 @@ fn populate_message_view(
                         } else {
                             (Cow::from(format!("* {} {}", &username, body)), None)
                         };
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
+                        let mut link_preview_ref =
+                            item.link_preview(cx, ids!(content.link_preview_view));
                         let link_previews_drawn = populate_text_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             &body,
                             formatted.as_ref(),
-                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
+                            Some(&mut link_preview_ref),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3208,9 +3287,10 @@ fn populate_message_view(
                         (item, true)
                     } else {
                         let image_info = image.info.clone();
+                        let text_or_image_ref = item.text_or_image(cx, ids!(content.message));
                         let is_image_fully_drawn = populate_image_message_content(
                             cx,
-                            &item.text_or_image(ids!(content.message)),
+                            &text_or_image_ref,
                             image_info,
                             image.source.clone(),
                             msg.body(),
@@ -3231,9 +3311,11 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
                         let is_location_fully_drawn = populate_location_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             location,
                         );
                         new_drawn_status.content_drawn = is_location_fully_drawn;
@@ -3251,9 +3333,11 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
                         new_drawn_status.content_drawn = populate_file_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             file_content,
                         );
                         (item, false)
@@ -3270,9 +3354,11 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
                         new_drawn_status.content_drawn = populate_audio_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             audio,
                         );
                         (item, false)
@@ -3289,9 +3375,11 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
                         new_drawn_status.content_drawn = populate_video_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             video,
                         );
                         (item, false)
@@ -3317,13 +3405,17 @@ fn populate_message_view(
                                     .join(", "),
                             ),
                         };
+                        let html_or_plaintext_ref =
+                            item.html_or_plaintext(cx, ids!(content.message));
+                        let mut link_preview_ref =
+                            item.link_preview(cx, ids!(content.link_preview_view));
 
                         new_drawn_status.content_drawn = populate_text_message_content(
                             cx,
-                            &item.html_or_plaintext(ids!(content.message)),
+                            &html_or_plaintext_ref,
                             &verification.body,
                             Some(&formatted),
-                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
+                            Some(&mut link_preview_ref),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3336,7 +3428,7 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
-                        item.label(ids!(content.message)).set_text(
+                        item.label(cx, ids!(content.message)).set_text(
                             cx,
                             &format!("[Unsupported {:?}]", msg_like_content.kind),
                         );
@@ -3363,9 +3455,10 @@ fn populate_message_view(
             } else {
                 if let StickerMediaSource::Plain(owned_mxc_url) = source {
                     let image_info = info;
+                    let text_or_image_ref = item.text_or_image(cx, ids!(content.message));
                     let is_image_fully_drawn = populate_image_message_content(
                         cx,
-                        &item.text_or_image(ids!(content.message)),
+                        &text_or_image_ref,
                         Some(Box::new(image_info.clone())),
                         MediaSource::Plain(owned_mxc_url.clone()),
                         body,
@@ -3390,14 +3483,7 @@ fn populate_message_view(
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
-                let html_or_plaintext_ref = item.html_or_plaintext(ids!(content.message));
-                html_or_plaintext_ref.apply_over(cx, live!{
-                    html_view = { html = {
-                        font_size: (REDACTED_MESSAGE_FONT_SIZE),
-                        draw_normal: { text_style: { font_size: (REDACTED_MESSAGE_FONT_SIZE)} }
-                        draw_italic: { text_style: { font_size: (REDACTED_MESSAGE_FONT_SIZE)} }
-                    } }
-                });
+                let html_or_plaintext_ref = item.html_or_plaintext(cx, ids!(content.message));
                 new_drawn_status.content_drawn = populate_redacted_message_content(
                     cx,
                     &html_or_plaintext_ref,
@@ -3413,7 +3499,7 @@ fn populate_message_view(
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
-                item.label(ids!(content.message)).set_text(
+                item.label(cx, ids!(content.message)).set_text(
                     cx,
                     &format!("[Unsupported {:?}] ", other),
                 );
@@ -3428,7 +3514,7 @@ fn populate_message_view(
     // If we didn't use a cached item, we need to draw all other message content:
     // the reactions, the read receipts avatar row, the reply preview.
     if !used_cached_item {
-        item.reaction_list(ids!(content.reaction_list)).set_list(
+        item.reaction_list(cx, ids!(content.reaction_list)).set_list(
             cx,
             event_tl_item.content().reactions(),
             timeline_kind.clone(),
@@ -3438,7 +3524,7 @@ fn populate_message_view(
         populate_read_receipts(&item, cx, timeline_kind, event_tl_item);
         let is_reply_fully_drawn = draw_replied_to_message(
             cx,
-            &item.view(ids!(replied_to_message)),
+            &item.view(cx, ids!(replied_to_message)),
             timeline_kind,
             msg_like_content.in_reply_to.as_ref(),
             event_tl_item.event_id(),
@@ -3493,11 +3579,11 @@ fn populate_message_view(
         new_drawn_status.profile_drawn = true;
     } else {
         // log!("\t --> populate_message_view(): DRAWING  profile draw for item_id: {item_id}");
-        let username_label = item.label(ids!(content.username));
+        let username_label = item.label(cx, ids!(content.username));
 
         if !is_server_notice { // the normal case
             let (username, profile_drawn) = set_username_and_get_avatar_retval.unwrap_or_else(||
-                item.avatar(ids!(profile.avatar)).set_avatar_and_get_username(
+                item.avatar(cx, ids!(profile.avatar)).set_avatar_and_get_username(
                     cx,
                     timeline_kind,
                     event_tl_item.sender(),
@@ -3506,26 +3592,14 @@ fn populate_message_view(
                     true,
                 )
             );
-            if is_notice {
-                username_label.apply_over(cx, live!(
-                    draw_text: {
-                        color: (COLOR_MESSAGE_NOTICE_TEXT),
-                    }
-                ));
-            }
             username_label.set_text(cx, &username);
             new_drawn_status.profile_drawn = profile_drawn;
         }
         else {
             // Server notices are drawn with a red color avatar background and username.
-            let avatar = item.avatar(ids!(profile.avatar));
+            let avatar = item.avatar(cx, ids!(profile.avatar));
             avatar.show_text(cx, Some(COLOR_FG_DANGER_RED), None, "⚠");
             username_label.set_text(cx, "Server notice");
-            username_label.apply_over(cx, live!(
-                draw_text: {
-                    color: (COLOR_FG_DANGER_RED),
-                }
-            ));
             new_drawn_status.profile_drawn = true;
         }
     }
@@ -3537,12 +3611,12 @@ fn populate_message_view(
 
     // Set the timestamp.
     if let Some(dt) = unix_time_millis_to_datetime(ts_millis) {
-        item.timestamp(ids!(profile.timestamp)).set_date_time(cx, dt);
+        item.timestamp(cx, ids!(profile.timestamp)).set_date_time(cx, dt);
     }
 
     // Set the "edited" indicator if this message was edited.
     if msg_like_content.as_message().is_some_and(|m| m.is_edited()) {
-        item.edited_indicator(ids!(profile.edited_indicator)).set_latest_edit(
+        item.edited_indicator(cx, ids!(profile.edited_indicator)).set_latest_edit(
             cx,
             event_tl_item,
         );
@@ -3576,7 +3650,7 @@ fn populate_message_view(
             };
 
             log!("TSP signature state for event {:?} is {:?}", event_tl_item.event_id(), tsp_sign_state);
-            item.tsp_sign_indicator(ids!(profile.tsp_sign_indicator))
+            item.tsp_sign_indicator(cx, ids!(profile.tsp_sign_indicator))
                 .show_with_state(cx, tsp_sign_state);
         }
     }
@@ -3730,7 +3804,7 @@ fn populate_image_message_content(
                 fully_drawn = false;
             }
             (MediaCacheEntry::Failed(_status_code), _media_format) => {
-                if text_or_image_ref.view(ids!(default_image_view)).visible() {
+                if text_or_image_ref.view(cx, ids!(default_image_view)).visible() {
                     fully_drawn = true;
                     return;
                 }
@@ -3915,9 +3989,9 @@ fn populate_location_message_content(
         let html_body = format!(
             "Location: <a href=\"{}\">{short_lat},{short_long}</a><br>\
             <ul>\
-            <li><a href=\"https://www.openstreetmap.org/?mlat={lat}&amp;mlon={long}#map=15/{lat}/{long}\">Open in OpenStreetMap</a></li>\
-            <li><a href=\"https://www.google.com/maps/search/?api=1&amp;query={lat},{long}\">Open in Google Maps</a></li>\
-            <li><a href=\"https://maps.apple.com/?ll={lat},{long}&amp;q={lat},{long}\">Open in Apple Maps</a></li>\
+            <li><a href=\"https://www.openstreetmap.org/?mlat: {lat}&amp;mlon: {long}#map=15/{lat}/{long}\">Open in OpenStreetMap</a></li>\
+            <li><a href=\"https://www.google.com/maps/search/?api=1&amp;query: {lat},{long}\">Open in Google Maps</a></li>\
+            <li><a href=\"https://maps.apple.com/?ll: {lat},{long}&amp;q: {lat},{long}\">Open in Apple Maps</a></li>\
             </ul>",
             location.geo_uri,
         );
@@ -4024,7 +4098,7 @@ fn draw_replied_to_message(
             TimelineDetails::Ready(replied_to_event) => {
                 let (in_reply_to_username, is_avatar_fully_drawn) =
                     replied_to_message_view
-                        .avatar(ids!(replied_to_message_content.reply_preview_avatar))
+                        .avatar(cx, ids!(replied_to_message_content.reply_preview_avatar))
                         .set_avatar_and_get_username(
                             cx,
                             timeline_kind,
@@ -4037,9 +4111,9 @@ fn draw_replied_to_message(
                 fully_drawn = is_avatar_fully_drawn;
 
                 replied_to_message_view
-                    .label(ids!(replied_to_message_content.reply_preview_username))
+                    .label(cx, ids!(replied_to_message_content.reply_preview_username))
                     .set_text(cx, in_reply_to_username.as_str());
-                let msg_body = replied_to_message_view.html_or_plaintext(ids!(reply_preview_body));
+                let msg_body = replied_to_message_view.html_or_plaintext(cx, ids!(reply_preview_body));
                 populate_preview_of_timeline_item(
                     cx,
                     &msg_body,
@@ -4051,26 +4125,26 @@ fn draw_replied_to_message(
             TimelineDetails::Error(_e) => {
                 fully_drawn = true;
                 replied_to_message_view
-                    .label(ids!(replied_to_message_content.reply_preview_username))
+                    .label(cx, ids!(replied_to_message_content.reply_preview_username))
                     .set_text(cx, "[Error fetching username]");
                 replied_to_message_view
-                    .avatar(ids!(replied_to_message_content.reply_preview_avatar))
+                    .avatar(cx, ids!(replied_to_message_content.reply_preview_avatar))
                     .show_text(cx, None, None, "?");
                 replied_to_message_view
-                    .html_or_plaintext(ids!(replied_to_message_content.reply_preview_body))
+                    .html_or_plaintext(cx, ids!(replied_to_message_content.reply_preview_body))
                     .show_plaintext(cx, "[Error fetching replied-to event]");
             }
             td @ TimelineDetails::Pending | td @ TimelineDetails::Unavailable => {
                 // We don't have the replied-to message yet, so we can't fully draw the preview.
                 fully_drawn = false;
                 replied_to_message_view
-                    .label(ids!(replied_to_message_content.reply_preview_username))
+                    .label(cx, ids!(replied_to_message_content.reply_preview_username))
                     .set_text(cx, "[Loading username...]");
                 replied_to_message_view
-                    .avatar(ids!(replied_to_message_content.reply_preview_avatar))
+                    .avatar(cx, ids!(replied_to_message_content.reply_preview_avatar))
                     .show_text(cx, None, None, "?");
                 replied_to_message_view
-                    .html_or_plaintext(ids!(replied_to_message_content.reply_preview_body))
+                    .html_or_plaintext(cx, ids!(replied_to_message_content.reply_preview_body))
                     .show_plaintext(cx, "[Loading replied-to message...]");
 
                 // Confusingly, we need to fetch the details of the `message` (the event that is the reply),
@@ -4109,7 +4183,7 @@ fn populate_thread_root_summary(
     fetched_thread_summaries: &HashMap<OwnedEventId, FetchedThreadSummary>,
     pending_thread_summary_fetches: &mut HashSet<OwnedEventId>,
 ) -> bool {
-    let thread_summary_view = item.view(ids!(thread_root_summary));
+    let thread_summary_view = item.view(cx, ids!(thread_root_summary));
     thread_summary_view.set_visible(cx, false); // hide by default
     let fully_drawn: bool;
 
@@ -4186,9 +4260,9 @@ fn populate_thread_root_summary(
         1 => Cow::Borrowed("1 reply"),
         n => Cow::Owned(format!("{n} replies"))
     };
-    item.label(ids!(thread_summary_count))
+    item.label(cx, ids!(thread_summary_count))
         .set_text(cx, &replies_count_text);
-    item.html(ids!(thread_summary_latest))
+    item.html(cx, ids!(thread_summary_latest))
         .set_text(cx, &latest_preview);
     fully_drawn
 }
@@ -4220,6 +4294,93 @@ pub fn populate_preview_of_timeline_item(
     widget_out.show_html(cx, html);
 }
 
+/// Creates and populates a SmallStateGroupHeader (FoldHeader) for a group of small state events.
+///
+/// This follows the portal_list_auto_grouping pattern:
+/// - The header shows a summary and fold button
+/// - The body contains a ViewList with all grouped items (excluding the first one)
+///
+/// # Arguments
+/// * `group_range` - The range of timeline indices covered by this group
+/// * `group` - The SmallStateGroup metadata containing cached summary and user IDs
+/// * `tl_items` - The full list of timeline items
+fn populate_small_state_group_header(
+    cx: &mut Cx2d,
+    scope: &mut Scope,
+    walk: Walk,
+    list: &mut PortalList,
+    item_id: usize,
+    timeline_kind: &TimelineKind,
+    group_range: &std::ops::Range<usize>,
+    group: &crate::home::event_group::SmallStateGroup,
+    tl_items: &imbl::Vector<Arc<TimelineItem>>,
+    content_drawn_since_last_update: &mut RangeSet<usize>,
+    profile_drawn_since_last_update: &mut RangeSet<usize>,
+    media_cache: &mut MediaCache,
+    link_preview_cache: &mut LinkPreviewCache,
+    fetched_thread_summaries: &HashMap<OwnedEventId, FetchedThreadSummary>,
+    pending_thread_summary_fetches: &mut HashSet<OwnedEventId>,
+    user_power_levels: &UserPowerLevels,
+    pinned_events: &[OwnedEventId],
+    room_screen_widget_uid: WidgetUid,
+) {
+    let (fold_item, _existed) = list.item_with_existed(cx, item_id, id!(SmallStateGroupHeader));
+    // Set the header summary text
+    if let Some(summary) = &group.cached_summary {
+        fold_item.label(cx, ids!(summary_text)).set_text(cx, summary);
+    }
+
+    // Set the avatars in the header
+    if let Some(user_ids) = &group.cached_avatar_user_ids {
+        crate::home::event_group::populate_avatar_row_from_user_ids(
+            cx,
+            &fold_item,
+            timeline_kind,
+            user_ids,
+        );
+    }
+    let mut walk = walk;
+    walk.height = Size::fit();
+    while let Some(item) = fold_item.draw_walk(cx, scope, walk).step() {
+        if let Some(mut list_ref) = item.as_portal_list().borrow_mut() {
+            let list = list_ref.deref_mut();
+            for tl_idx in (group_range.start)..group_range.end {
+                if let Some(timeline_item) = tl_items.get(tl_idx) {
+                    let item_drawn_status = ItemDrawnStatus {
+                        content_drawn: content_drawn_since_last_update.contains(&tl_idx),
+                        profile_drawn: profile_drawn_since_last_update.contains(&tl_idx),
+                    };
+                    if let TimelineItemKind::Event(event_tl_item) = timeline_item.kind() {
+                        // Create a new SmallStateEvent view from the template
+                        let (item, item_drawn_status) = match event_tl_item.content() {
+                            TimelineItemContent::MsgLike(msg_like_content) => match &msg_like_content.kind {
+                                MsgLikeKind::Redacted => {
+                                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
+                                    populate_message_view(cx, list, tl_idx, timeline_kind, event_tl_item, msg_like_content, prev_event, media_cache, link_preview_cache, fetched_thread_summaries, pending_thread_summary_fetches, user_power_levels, pinned_events, item_drawn_status, room_screen_widget_uid)
+                                }
+                                MsgLikeKind::Poll(poll_state) => populate_small_state_event(cx, list, tl_idx, timeline_kind, event_tl_item, poll_state, item_drawn_status),
+                                MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(cx, list, tl_idx, timeline_kind, event_tl_item, utd, item_drawn_status),
+                                MsgLikeKind::Other(other) => populate_small_state_event(cx, list, tl_idx, timeline_kind, event_tl_item, other, item_drawn_status),
+                                _ => (list.item_with_existed(cx, tl_idx, id!(Empty)).0, item_drawn_status)
+                            },
+                            TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(cx, list, tl_idx, timeline_kind, event_tl_item, membership_change, item_drawn_status),
+                            TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(cx, list, tl_idx, timeline_kind, event_tl_item, profile_change, item_drawn_status),
+                            TimelineItemContent::OtherState(other_state) => populate_small_state_event(cx, list, tl_idx, timeline_kind, event_tl_item, other_state, item_drawn_status),
+                            _=> (list.item_with_existed(cx, tl_idx, id!(Empty)).0, item_drawn_status)
+                        };
+                        if item_drawn_status.content_drawn {
+                            content_drawn_since_last_update.insert(tl_idx..tl_idx + 1);
+                        }
+                        if item_drawn_status.profile_drawn {
+                            profile_drawn_since_last_update.insert(tl_idx..tl_idx + 1);
+                        }
+                        item.draw_all(cx, scope);
+                    }
+                }
+            }
+        }
+    }
+}
 
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
@@ -4264,7 +4425,7 @@ impl SmallStateEventContent for EncryptedMessage {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(ids!(content)).set_text(
+        item.label(cx, ids!(content)).set_text(
             cx,
             &text_preview_of_encrypted_message(self).format_with(username, false),
         );
@@ -4286,7 +4447,7 @@ impl SmallStateEventContent for OtherMessageLike {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(ids!(content)).set_text(
+        item.label(cx, ids!(content)).set_text(
             cx,
             &text_preview_of_other_message_like(self).format_with(username, false),
         );
@@ -4309,7 +4470,7 @@ impl SmallStateEventContent for PollState {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(ids!(content)).set_text(
+        item.label(cx, ids!(content)).set_text(
             cx,
             self.fallback_text().unwrap_or_else(|| self.results().question).as_str(),
         );
@@ -4331,7 +4492,7 @@ impl SmallStateEventContent for timeline::OtherState {
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
         let item = if let Some(text_preview) = text_preview_of_other_state(self, false) {
-            item.label(ids!(content))
+            item.label(cx, ids!(content))
                 .set_text(cx, &text_preview.format_with(username, false));
             new_drawn_status.content_drawn = true;
             item
@@ -4356,7 +4517,7 @@ impl SmallStateEventContent for MemberProfileChange {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(ids!(content)).set_text(
+        item.label(cx, ids!(content)).set_text(
             cx,
             &text_preview_of_member_profile_change(self, username, false)
                 .format_with(username, false),
@@ -4386,11 +4547,11 @@ impl SmallStateEventContent for RoomMembershipChange {
             );
         };
 
-        item.label(ids!(content))
+        item.label(cx, ids!(content))
             .set_text(cx, &preview.format_with(username, false));
 
         // The invite_user_button is only used for "Knocked" membership change events.
-        item.button(ids!(invite_user_button)).set_visible(
+        item.button(cx, ids!(invite_user_button)).set_visible(
             cx,
             matches!(self.change(), Some(MembershipChange::Knocked)),
         );
@@ -4433,7 +4594,7 @@ fn populate_small_state_event(
 
     let username = username_opt.unwrap_or_else(|| {
         // As a fallback, call `set_avatar_and_get_username` to get the user's display name.
-        let avatar_ref = item.avatar(ids!(avatar));
+        let avatar_ref = item.avatar(cx, ids!(avatar));
 
         let (username, profile_drawn) = avatar_ref.set_avatar_and_get_username(
             cx,
@@ -4445,7 +4606,7 @@ fn populate_small_state_event(
         );
         // Draw the timestamp as part of the profile.
         if let Some(dt) = unix_time_millis_to_datetime(event_tl_item.timestamp()) {
-            item.timestamp(ids!(left_container.timestamp)).set_date_time(cx, dt);
+            item.timestamp(cx, ids!(left_container.timestamp)).set_date_time(cx, dt);
         }
         new_drawn_status.profile_drawn = profile_drawn;
         username
@@ -4511,7 +4672,7 @@ pub enum InviteResultAction {
 
 
 /// Actions related to a specific message within a room timeline.
-#[derive(Clone, DefaultNone, Debug)]
+#[derive(Clone, Default, Debug)]
 pub enum MessageAction {
     /// The user clicked the "react" button on a message
     /// and wants to send the given `reaction` to that message.
@@ -4574,12 +4735,21 @@ pub enum MessageAction {
     },
     /// The user requested closing the message action bar
     ActionBarClose,
+    #[default]
     None,
 }
 
+impl ActionDefaultRef for MessageAction {
+    fn default_ref() -> &'static Self {
+        static DEFAULT: MessageAction = MessageAction::None;
+        &DEFAULT
+    }
+}
+
 /// A widget representing a single message of any kind within a room timeline.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct Message {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 
@@ -4592,7 +4762,7 @@ impl Widget for Message {
             self.redraw(cx);
         }
 
-        if !self.animator.is_track_animating(cx, ids!(highlight))
+        if !self.animator.is_track_animating(id!(highlight))
             && self.animator_in_state(cx, ids!(highlight.on))
         {
             self.animator_play(cx, ids!(highlight.off));
@@ -4603,12 +4773,11 @@ impl Widget for Message {
         // We first handle a click on the replied-to message preview, if present,
         // because we don't want any widgets within the replied-to message to be
         // clickable or otherwise interactive.
-        match event.hits(cx, self.view(ids!(replied_to_message)).area()) {
+        match event.hits(cx, self.view(cx, ids!(replied_to_message)).area()) {
             Hit::FingerDown(fe) => {
                 if fe.device.mouse_button().is_some_and(|b| b.is_secondary()) {
                     cx.widget_action(
-                        details.room_screen_widget_uid,
-                        &scope.path,
+                        details.room_screen_widget_uid, 
                         MessageAction::OpenMessageContextMenu {
                             details: details.clone(),
                             abs_pos: fe.abs,
@@ -4618,8 +4787,7 @@ impl Widget for Message {
             }
             Hit::FingerLongPress(lp) => {
                 cx.widget_action(
-                    details.room_screen_widget_uid,
-                    &scope.path,
+                    details.room_screen_widget_uid, 
                     MessageAction::OpenMessageContextMenu {
                         details: details.clone(),
                         abs_pos: lp.abs,
@@ -4629,8 +4797,7 @@ impl Widget for Message {
             // If the hit occurred on the replied-to message preview, jump to it.
             Hit::FingerUp(fe) if fe.is_over && fe.is_primary_hit() && fe.was_tap() => {
                 cx.widget_action(
-                    details.room_screen_widget_uid,
-                    &scope.path,
+                    details.room_screen_widget_uid, 
                     MessageAction::JumpToRelated(details.clone()),
                 );
             }
@@ -4639,12 +4806,11 @@ impl Widget for Message {
 
         // Handle clicks on the thread summary shown beneath a thread-root message.
         if let Some(thread_root_event_id) = details.thread_root_event_id.as_ref() {
-            let thread_root_summary = self.view(ids!(thread_root_summary));
+            let thread_root_summary = self.view(cx, ids!(thread_root_summary));
             let apply_hover = |cx: &mut Cx, bg_color: Vec4| {
-                thread_root_summary.apply_over(cx, live! {
-                    draw_bg: {
-                        color: (bg_color)
-                    }
+                let mut thread_root_summary_ref = thread_root_summary.clone();
+                script_apply_eval!(cx, thread_root_summary_ref, {
+                    draw_bg.color: #(bg_color)
                 });
             };
             match event.hits(cx, thread_root_summary.area()) {
@@ -4652,8 +4818,7 @@ impl Widget for Message {
                     apply_hover(cx, COLOR_THREAD_SUMMARY_BG_HOVER);
                     if fe.device.mouse_button().is_some_and(|b| b.is_secondary()) {
                         cx.widget_action(
-                            details.room_screen_widget_uid,
-                            &scope.path,
+                            details.room_screen_widget_uid, 
                             MessageAction::OpenMessageContextMenu {
                                 details: details.clone(),
                                 abs_pos: fe.abs,
@@ -4669,8 +4834,7 @@ impl Widget for Message {
                 }
                 Hit::FingerLongPress(lp) => {
                     cx.widget_action(
-                        details.room_screen_widget_uid,
-                        &scope.path,
+                        details.room_screen_widget_uid, 
                         MessageAction::OpenMessageContextMenu {
                             details: details.clone(),
                             abs_pos: lp.abs,
@@ -4681,8 +4845,7 @@ impl Widget for Message {
                     apply_hover(cx, COLOR_THREAD_SUMMARY_BG);
                     if fe.is_over && fe.is_primary_hit() && fe.was_tap() {
                         cx.widget_action(
-                            details.room_screen_widget_uid,
-                            &scope.path,
+                            details.room_screen_widget_uid, 
                             MessageAction::OpenThread(thread_root_event_id.clone()),
                         );
                     }
@@ -4706,8 +4869,7 @@ impl Widget for Message {
                 // A right click means we should display the context menu.
                 if fe.device.mouse_button().is_some_and(|b| b.is_secondary()) {
                     cx.widget_action(
-                        details.room_screen_widget_uid,
-                        &scope.path,
+                        details.room_screen_widget_uid, 
                         MessageAction::OpenMessageContextMenu {
                             details: details.clone(),
                             abs_pos: fe.abs,
@@ -4717,8 +4879,7 @@ impl Widget for Message {
             }
             Hit::FingerLongPress(lp) => {
                 cx.widget_action(
-                    details.room_screen_widget_uid,
-                    &scope.path,
+                    details.room_screen_widget_uid, 
                     MessageAction::OpenMessageContextMenu {
                         details: details.clone(),
                         abs_pos: lp.abs,
@@ -4751,14 +4912,12 @@ impl Widget for Message {
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         if self.details.as_ref().is_some_and(|d| d.should_be_highlighted) {
-            self.view.apply_over(
-                cx, live!(
-                    draw_bg: {
-                        color: (vec4(1.0, 1.0, 0.82, 1.0))
-                        mentions_bar_color: #ffd54f
-                    }
-                )
-            )
+            script_apply_eval!(cx, self, {
+                draw_bg +: {
+                    color: #ffffd1,
+                    mentions_bar_color: #ffd54f
+                }
+            });
         }
 
         self.view.draw_walk(cx, scope, walk)
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index af426aaa4..0a901de36 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -76,69 +76,61 @@ pub fn clear_all_invited_rooms(_cx: &mut Cx) {
 }
 
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::html_or_plaintext::HtmlOrPlaintext;
-    use crate::shared::collapsible_header::*;
-    use crate::home::rooms_list_entry::*;
-    use crate::home::space_lobby::*;
-
-    StatusLabel = <View> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.RoomsListStatusLabel = View {
         width: Fill, height: Fit,
         flow: Right,
-        align: { x: 0.5, y: 0.5 }
+        align: Align{ x: 0.5, y: 0.5 }
         padding: 15.0,
 
-        loading_spinner = <LoadingSpinner> {
+        loading_spinner := LoadingSpinner {
             visible: false,
             width: 20,
             height: 20,
-            draw_bg: {
-                color: (COLOR_ACTIVE_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_ACTIVE_PRIMARY))
                 border_size: 3.0,
             }
         }
 
-        label = <Label> {
+        label := Label {
             padding: 0
             width: Fill,
-            flow: RightWrap,
-            align: { x: 0.5, y: 0.5 }
-            draw_text: {
-                wrap: Word,
+            flow: Flow.Right{wrap: true},
+            align: Align{ x: 0.5, y: 0.5 }
+            draw_text +: {
+                flow: Flow.Right{wrap: true},
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: <REGULAR_TEXT>{}
+                text_style: REGULAR_TEXT {}
             }
             text: "Loading rooms..."
         }
     }
 
-    pub RoomsList = {{RoomsList}} {
+    mod.widgets.RoomsList = #(RoomsList::register_widget(vm)) {
         width: Fill, height: Fill
         flow: Down
-        cursor: Default,
+        cursor: MouseCursor.Default,
 
-        space_lobby_entry = <SpaceLobbyEntry> {}
+        space_lobby_entry := SpaceLobbyEntry {}
 
-        list = <PortalList> {
+        list := PortalList {
             keep_invisible: false,
             auto_tail: false,
             width: Fill, height: Fill
             flow: Down,
-            padding: {top: 5}
+            padding: Inset{top: 5}
             spacing: 0.0
 
-            collapsible_header = <CollapsibleHeader> {}
-            rooms_list_entry = <RoomsListEntry> {}
-            empty = <View> {}
-            status_label = <StatusLabel> {}
-            bottom_filler = <View> {
+            collapsible_header := CollapsibleHeader {}
+            rooms_list_entry := RoomsListEntry {}
+            empty := View {}
+            status_label := mod.widgets.RoomsListStatusLabel {}
+            bottom_filler := View {
                 width: Fill,
                 height: 100.0,
             }
@@ -239,7 +231,7 @@ pub fn enqueue_rooms_list_update(update: RoomsListUpdate) {
 }
 
 /// Actions related to a single room in the RoomsList widget.
-#[derive(Debug, Clone, DefaultNone)]
+#[derive(Debug, Clone, Default)]
 pub enum RoomsListAction {
     /// A new room or space was selected.
     Selected(SelectedRoom),
@@ -257,9 +249,17 @@ pub enum RoomsListAction {
         details: RoomContextMenuDetails,
         pos: DVec2,
     },
+    #[default]
     None,
 }
 
+impl ActionDefaultRef for RoomsListAction {
+    fn default_ref() -> &'static Self {
+        static DEFAULT: RoomsListAction = RoomsListAction::None;
+        &DEFAULT
+    }
+}
+
 
 /// UI-related info about a joined room.
 ///
@@ -389,7 +389,7 @@ struct SpaceMapValue {
     parent_chain: ParentChain,
 }
 
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomsList {
     #[deref] view: View,
 
@@ -468,12 +468,6 @@ pub struct RoomsList {
     // #[rust] all_rooms_loaded: bool,
 }
 
-impl LiveHook for RoomsList {
-    fn after_new_from_doc(&mut self, _: &mut Cx) {
-        self.invited_rooms = ALL_INVITED_ROOMS.with(Rc::clone);
-    }
-}
-
 /// A macro that returns whether a given Room should be displayed in the RoomsList.
 /// This is only intended for usage within RoomsList methods.
 ///
@@ -514,7 +508,7 @@ impl RoomsList {
     }
 
     /// Handle all pending updates to the list of all rooms.
-    fn handle_rooms_list_updates(&mut self, cx: &mut Cx, _event: &Event, scope: &mut Scope) {
+    fn handle_rooms_list_updates(&mut self, cx: &mut Cx, _event: &Event, _scope: &mut Scope) {
         let mut num_updates: usize = 0;
         let mut needs_sort = false;
         while let Some(update) = PENDING_ROOM_UPDATES.pop() {
@@ -556,8 +550,7 @@ impl RoomsList {
                             .map(|index| self.displayed_invited_rooms.remove(index));
                         if let Some(room) = self.all_joined_rooms.get(&room_id) {
                             cx.widget_action(
-                                self.widget_uid(),
-                                &scope.path,
+                                self.widget_uid(), 
                                 RoomsListAction::InviteAccepted {
                                     room_name_id: room.room_name_id.clone(),
                                 }
@@ -782,7 +775,7 @@ impl RoomsList {
                 RoomsListUpdate::ScrollToRoom(room_id) => {
                     // Ensure indexes are fresh in case rooms were added/removed in this batch of updates.
                     self.recalculate_indexes();
-                    let portal_list = self.view.portal_list(ids!(list));
+                    let portal_list = self.view.portal_list(cx, ids!(list));
                     let speed = 50.0;
                     let portal_list_index = if let Some(regular_index) = self.displayed_regular_rooms.iter().position(|r| r == &room_id) {
                         self.regular_rooms_indexes.first_room_index + regular_index
@@ -921,7 +914,7 @@ impl RoomsList {
 
         self.update_status();
 
-        let portal_list = self.view.portal_list(ids!(list));
+        let portal_list = self.view.portal_list(cx, ids!(list));
         if reset_scroll {
             portal_list.set_first_id_and_scroll(0, 0.0);
         }
@@ -1177,6 +1170,11 @@ impl RoomsList {
 
 impl Widget for RoomsList {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let global_invited_rooms = ALL_INVITED_ROOMS.with(Rc::clone);
+        if !Rc::ptr_eq(&self.invited_rooms, &global_invited_rooms) {
+            self.invited_rooms = global_invited_rooms;
+        }
+
         // Process all pending updates to the list of all rooms, and then redraw it.
         if matches!(event, Event::Signal) {
             self.handle_rooms_list_updates(cx, event, scope);
@@ -1186,7 +1184,7 @@ impl Widget for RoomsList {
         // e.g., the user clicking on a RoomsListEntry to select a room.
         // We use Scope `props` to pass down the current scrolling state of the PortalList.
         let props = RoomsListScopeProps {
-            was_scrolling: self.view.portal_list(ids!(list)).was_scrolling(),
+            was_scrolling: self.view.portal_list(cx, ids!(list)).was_scrolling(),
         };
         let rooms_list_actions = cx.capture_actions(
             |cx| self.view.handle_event(cx, event, &mut Scope::with_props(&props))
@@ -1209,8 +1207,7 @@ impl Widget for RoomsList {
 
                 self.current_active_room = Some(new_selected_room.clone());
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     RoomsListAction::Selected(new_selected_room),
                 );
                 self.redraw(cx);
@@ -1229,8 +1226,7 @@ impl Widget for RoomsList {
                     is_marked_unread: jr.is_marked_unread,
                 };
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     RoomsListAction::OpenRoomContextMenu { details, pos },
                 );
             }
@@ -1240,8 +1236,7 @@ impl Widget for RoomsList {
                 let new_selected_space = SelectedRoom::Space { space_name_id };
                 self.current_active_room = Some(new_selected_space.clone());
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     RoomsListAction::Selected(new_selected_space),
                 );
                 self.redraw(cx);
@@ -1283,7 +1278,7 @@ impl Widget for RoomsList {
                             }
 
                             self.selected_space = Some(space_name_id.clone());
-                            self.view.space_lobby_entry(ids!(space_lobby_entry)).set_visible(cx, true);
+                            self.view.space_lobby_entry(cx, ids!(space_lobby_entry)).set_visible(cx, true);
 
                             // If we don't have the full list of children in this newly-selected space, then fetch it.
                             let (is_fully_paginated, parent_chain) = self.space_map
@@ -1318,7 +1313,7 @@ impl Widget for RoomsList {
                         }
                         _ => {
                             self.selected_space = None;
-                            self.view.space_lobby_entry(ids!(space_lobby_entry)).set_visible(cx, false);
+                            self.view.space_lobby_entry(cx, ids!(space_lobby_entry)).set_visible(cx, false);
                         }
                     }
 
@@ -1514,10 +1509,7 @@ impl Widget for RoomsList {
                 // Draw the status label as the bottom entry.
                 else if portal_list_index == status_label_id {
                     let item = list.item(cx, portal_list_index, id!(status_label));
-                    item.as_view().apply_over(cx, live!{
-                        height: Fit,
-                        label = { text: (&self.status) }
-                    });
+                    item.label(cx, ids!(label)).set_text(cx, &self.status);
                     item.draw_all(cx, &mut scope);
                 }
                 // Draw a filler entry to take up space at the bottom of the portal list.
diff --git a/src/home/rooms_list_entry.rs b/src/home/rooms_list_entry.rs
index 093c16803..d5a0e87e4 100644
--- a/src/home/rooms_list_entry.rs
+++ b/src/home/rooms_list_entry.rs
@@ -9,125 +9,102 @@ use crate::{
 };
 
 use super::rooms_list::{InvitedRoomInfo, InviterInfo, JoinedRoomInfo, RoomsListScopeProps};
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::html_or_plaintext::HtmlOrPlaintext;
-    use crate::shared::unread_badge::UnreadBadge;
 
     // A cancel icon to be displayed in the RoomsListEntry when the room is tombstoned.
-    TombstoneIcon = <View> {
+    mod.widgets.TombstoneIcon = View {
         width: Fit, height: Fit,
         visible: false,
 
-        <Icon> {
+        Icon {
             width: 19, height: 19,
-            align: {x: 0.5, y: 0.5}
-            draw_icon: {
-                svg_file: (ICON_TOMBSTONE)
+            align: Align{x: 0.5, y: 0.5}
+            draw_icon +: {
+                svg: (ICON_TOMBSTONE)
                 color: (COLOR_FG_DANGER_RED)
             }
-            icon_walk: { width: 15, height: 15 }
+            icon_walk: Walk{ width: 15, height: 15 }
         }
     }
 
-    RoomName = <Label> {
+    mod.widgets.RoomName = Label {
         width: Fill, height: Fit
         flow: Right, // do not wrap
         padding: 0,
-        draw_text:{
+        draw_text +: {
             color: #000,
-            wrap: Ellipsis,
-            text_style: <USERNAME_TEXT_STYLE>{ font_size: 10. }
+            flow: Flow.Right{wrap: true},
+            text_style: USERNAME_TEXT_STYLE { font_size: 10. }
         }
         text: "[Room name unknown]"
     }
 
-    Timestamp = <Label> {
-        padding: {top: 1},
+    mod.widgets.RoomsListEntryTimestamp = Label {
+        padding: Inset{top: 1},
         width: Fit, height: Fit
         flow: Right, // do not wrap
-        draw_text:{
+        draw_text +: {
             color: (TIMESTAMP_TEXT_COLOR)
-            text_style: <TIMESTAMP_TEXT_STYLE>{
+            text_style: TIMESTAMP_TEXT_STYLE {
                 font_size: 7.5
             },
         }
     }
 
-    MessagePreview = <View> {
+    mod.widgets.MessagePreview = View {
         width: Fill, height: Fit
-        latest_message = <HtmlOrPlaintext> {
-            html_view = { html = {
-                font_size: 9.3,
-                draw_normal:      { text_style: { font_size: 9.3 } },
-                draw_italic:      { text_style: { font_size: 9.3 } },
-                draw_bold:        { text_style: { font_size: 9.3 } },
-                draw_bold_italic: { text_style: { font_size: 9.3 } },
-                draw_fixed:       { text_style: { font_size: 9.3 } },
-                a = {
-                    matrix_link_view = {
-                        matrix_link = {
-                            padding: { top: 2.0, bottom: 2.0, left: 4.0, right: 4.0 }
-                            draw_bg: {
-                                color: #000,
-                                border_radius: 3.5,
-                            }
-                            avatar = {
-                                height: 10.0, width: 10.0
-                                text_view = { text = { draw_text: {
-                                    text_style: <TITLE_TEXT>{ font_size: 6.3 }
-                                }}}
-                            }
-                            title = {
-                                draw_text: {
-                                    color: #fff
-                                    text_style: {
-                                        font_size: 6.3
-                                    }
-                                }
-                            }
-                        }
-                    }
+        latest_message := HtmlOrPlaintext {
+            html_view +: {
+                html +: {
+                    font_size: 9.3
+                    text_style_normal: theme.font_regular { font_size: 9.3 }
+                    text_style_italic: theme.font_italic { font_size: 9.3 }
+                    text_style_bold: theme.font_bold { font_size: 9.3 }
+                    text_style_bold_italic: theme.font_bold_italic { font_size: 9.3 }
+                    text_style_fixed: theme.font_code { font_size: 9.3 }
                 }
-            } }
-            plaintext_view = { pt_label = {
-                draw_text: {
-                    text_style: { font_size: 9.5 },
+            }
+            plaintext_view +: {
+                pt_label +: {
+                    draw_text +: {
+                        text_style: theme.font_regular { font_size: 9.5 },
+                    }
+                    text: "[No recent messages]"
                 }
-                text: "[No recent messages]"
-            } }
+            }
         }
     }
 
-    RoomsListEntryContent = {{RoomsListEntryContent}} {
+    mod.widgets.RoomsListEntryContent = set_type_default() do #(RoomsListEntryContent::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         flow: Right,
         spacing: 10,
         padding: 10,
         width: Fill, height: Fit
         show_bg: true
-        draw_bg: {
-            color: #0000
-            instance border_size: 0.0
-            instance border_color: #0000
-            instance inset: vec4(0.0, 0.0, 0.0, 0.0)
-            instance border_radius: 4.0
-
-            fn get_color(self) -> vec4 {
-                return self.color
+        draw_bg +: {
+            active: instance(0.0)
+            color: uniform(#0000)
+            color_selected: uniform(vec4(0.059, 0.533, 0.996, 1.0))
+            border_size: instance(0.0)
+            border_color: instance(instance(#0000))
+            inset: instance(vec4(0.0))
+            border_radius: instance(4.0)
+
+            get_color: fn() -> vec4 {
+                return mix(self.color, self.color_selected, self.active)
             }
 
-            fn get_border_color(self) -> vec4 {
+            get_border_color: fn() -> vec4 {
                 return self.border_color
             }
 
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                 sdf.box(
                     self.inset.x + self.border_size,
                     self.inset.y + self.border_size,
@@ -142,64 +119,81 @@ live_design! {
                 return sdf.result;
             }
         }
+        animator: Animator{
+            selected: {
+                default: @off
+                off: AnimatorState{
+                    from: {all: Snap}
+                    apply: {
+                        draw_bg: {active: 0.0}
+                    }
+                }
+                on: AnimatorState{
+                    from: {all: Snap}
+                    apply: {
+                        draw_bg: {active: 1.0}
+                    }
+                }
+            }
+        }
     }
 
-    pub RoomsListEntry = {{RoomsListEntry}} {
+    mod.widgets.RoomsListEntry = #(RoomsListEntry::register_widget(vm)) {
         flow: Down, height: Fit
-        cursor: Default,
+        cursor: MouseCursor.Default,
         show_bg: true,
 
         // Wrap the RoomsListEntryContent in an AdaptiveView to change the displayed content
         // (and its layout) based on the available space in the sidebar.
-        adaptive_preview = <AdaptiveView> {
+        adaptive_preview := AdaptiveView {
             height: Fit
 
-            OnlyIcon = <RoomsListEntryContent> {
-                align: {x: 0.5, y: 0.5}
+            OnlyIcon := mod.widgets.RoomsListEntryContent {
+                align: Align{x: 0.5, y: 0.5}
                 padding: 5.
-                <View> {
+                View {
                     height: Fit
                     flow: Overlay
-                    align: { x: 1.0 }
-                    avatar = <Avatar> {}
-                    unread_badge = <UnreadBadge> {}
-                    tombstone_icon = <TombstoneIcon> {}
+                    align: Align{ x: 1.0 }
+                    avatar := Avatar {}
+                    unread_badge := UnreadBadge {}
+                    tombstone_icon := mod.widgets.TombstoneIcon {}
                 }
             }
-            IconAndName = <RoomsListEntryContent> {
+            IconAndName := mod.widgets.RoomsListEntryContent {
                 padding: 5.
-                align: {x: 0.5, y: 0.5}
-                avatar = <Avatar> {}
-                room_name = <RoomName> {}
-                unread_badge = <UnreadBadge>  {}
-                tombstone_icon = <TombstoneIcon> {}
+                align: Align{x: 0.5, y: 0.5}
+                avatar := Avatar {}
+                room_name := mod.widgets.RoomName {}
+                unread_badge := UnreadBadge {}
+                tombstone_icon := mod.widgets.TombstoneIcon {}
             }
-            FullPreview = <RoomsListEntryContent> {
+            FullPreview := mod.widgets.RoomsListEntryContent {
                 padding: 10
-                avatar = <Avatar> {}
-                <View> {
+                avatar := Avatar {}
+                View {
                     flow: Down
                     width: Fill, height: 56
-                    align: { x: 0.0, y: 0.0 }
-                    top = <View> {
+                    align: Align{ x: 0.0, y: 0.0 }
+                    top := View {
                         width: Fill, height: Fit,
                         spacing: 3,
                         flow: Right,
-                        room_name = <RoomName> {}
-                        timestamp = <Timestamp> { }
+                        room_name := mod.widgets.RoomName {}
+                        timestamp := mod.widgets.RoomsListEntryTimestamp { }
                     }
-                    bottom = <View> {
+                    bottom := View {
                         width: Fill, height: Fill,
                         spacing: 2,
                         flow: Right,
-                        preview = <MessagePreview> {
-                            margin: { top: 2.5 }
+                        preview := mod.widgets.MessagePreview {
+                            margin: Inset{ top: 2.5 }
                         }
-                        <View> {
+                        View {
                             width: Fit, height: Fit
-                            align: { x: 1.0 }
-                            unread_badge = <UnreadBadge> {}
-                            tombstone_icon = <TombstoneIcon> {}
+                            align: Align{ x: 1.0 }
+                            unread_badge := UnreadBadge {}
+                            tombstone_icon := mod.widgets.TombstoneIcon {}
                         }
                     }
                 }
@@ -209,37 +203,33 @@ live_design! {
 }
 
 /// An entry in the rooms list.
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomsListEntry {
     #[deref] view: View,
     #[rust] room_id: Option<OwnedRoomId>,
 }
 
 /// Widget actions that are emitted by a RoomsListEntry.
-#[derive(Clone, DefaultNone, Debug)]
+#[derive(Clone, Default, Debug)]
 pub enum RoomsListEntryAction {
     /// This RoomsListEntry was primary-clicked or tapped.
     PrimaryClicked(OwnedRoomId),
     /// This RoomsListEntry was right-clicked or long-pressed.
     SecondaryClicked(OwnedRoomId, DVec2),
+    #[default]
     None,
 }
 
-impl LiveHook for RoomsListEntry {
-    fn after_new_from_doc(&mut self, _cx: &mut Cx) {
-        // Adapt the preview based on the available space.
+impl Widget for RoomsListEntry {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view
-            .adaptive_view(ids!(adaptive_preview))
+            .adaptive_view(cx, ids!(adaptive_preview))
             .set_variant_selector(|_cx, parent_size| match parent_size.x {
-                width if width <= 70.0  => id!(OnlyIcon),
+                width if width <= 70.0 => id!(OnlyIcon),
                 width if width <= 200.0 => id!(IconAndName),
                 _ => id!(FullPreview),
             });
-    }
-}
 
-impl Widget for RoomsListEntry {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
         let rooms_list_props = scope.props.get::<RoomsListScopeProps>().unwrap();
 
@@ -253,21 +243,19 @@ impl Widget for RoomsListEntry {
                     cx.set_key_focus(area);
                     if fe.device.mouse_button().is_some_and(|b| b.is_secondary()) {
                         cx.widget_action(
-                            uid,
-                            &scope.path,
+                            uid, 
                             RoomsListEntryAction::SecondaryClicked(room_id.clone(), fe.abs),
                         );
                     }
                 }
                 Hit::FingerLongPress(fe) => {
                     cx.widget_action(
-                        uid,
-                        &scope.path,
+                        uid, 
                         RoomsListEntryAction::SecondaryClicked(room_id.clone(), fe.abs),
                     );
                 }
                 Hit::FingerUp(fe) if !rooms_list_props.was_scrolling && fe.is_over && fe.is_primary_hit() && fe.was_tap() => {
-                    cx.widget_action(uid, &scope.path, RoomsListEntryAction::PrimaryClicked(room_id.clone()));
+                    cx.widget_action(uid,  RoomsListEntryAction::PrimaryClicked(room_id.clone()));
                 }
                 _ => { }
             }
@@ -288,13 +276,18 @@ impl Widget for RoomsListEntry {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct RoomsListEntryContent {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
+    #[animator] animator: Animator,
 }
 
 impl Widget for RoomsListEntryContent {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if self.animator_handle_event(cx, event).must_redraw() {
+            self.redraw(cx);
+        }
         self.view.handle_event(cx, event, scope);
     }
 
@@ -316,26 +309,26 @@ impl RoomsListEntryContent {
         cx: &mut Cx,
         room_info: &JoinedRoomInfo,
     ) {
-        self.view.label(ids!(room_name)).set_text(cx, &room_info.room_name_id.to_string());
+        self.view.label(cx, ids!(room_name)).set_text(cx, &room_info.room_name_id.to_string());
         if let Some((ts, msg)) = room_info.latest.as_ref() {
             if let Some(human_readable_date) = relative_format(*ts) {
                 self.view
-                    .label(ids!(timestamp))
+                    .label(cx, ids!(timestamp))
                     .set_text(cx, &human_readable_date);
             }
             self.view
-                .html_or_plaintext(ids!(latest_message))
+                .html_or_plaintext(cx, ids!(latest_message))
                 .show_html(cx, msg);
         }
 
-        self.view.unread_badge(ids!(unread_badge)).update_counts(
+        self.view.unread_badge(cx, ids!(unread_badge)).update_counts(
             room_info.is_marked_unread,
             room_info.num_unread_mentions,
             room_info.num_unread_messages,
         );
         self.draw_common(cx, &room_info.room_avatar, room_info.is_selected);
         // Show tombstone icon if the room is tombstoned
-        self.view.view(ids!(tombstone_icon)).set_visible(cx, room_info.is_tombstoned);
+        self.view.view(cx, ids!(tombstone_icon)).set_visible(cx, room_info.is_tombstoned);
     }
 
     /// Populates this RoomsListEntry with info about an invited room.
@@ -344,22 +337,22 @@ impl RoomsListEntryContent {
         cx: &mut Cx,
         room_info: &InvitedRoomInfo,
     ) {
-        self.view.label(ids!(room_name)).set_text(cx, &room_info.room_name_id.to_string());
+        self.view.label(cx, ids!(room_name)).set_text(cx, &room_info.room_name_id.to_string());
         // Hide the timestamp field, and use the latest message field to show the inviter.
-        self.view.label(ids!(timestamp)).set_text(cx, "");
+        self.view.label(cx, ids!(timestamp)).set_text(cx, "");
         let inviter_string = match &room_info.inviter_info {
             Some(InviterInfo { user_id, display_name: Some(dn), .. }) => format!("Invited by <b>{dn}</b> ({user_id})"),
             Some(InviterInfo { user_id, .. }) => format!("Invited by {user_id}"),
             None => String::from("You were invited"),
         };
-        self.view.html_or_plaintext(ids!(latest_message)).show_html(cx, &inviter_string);
+        self.view.html_or_plaintext(cx, ids!(latest_message)).show_html(cx, &inviter_string);
 
         match room_info.room_avatar {
             FetchedRoomAvatar::Text(ref text) => {
-                self.view.avatar(ids!(avatar)).show_text(cx, None, None, text);
+                self.view.avatar(cx, ids!(avatar)).show_text(cx, None, None, text);
             }
             FetchedRoomAvatar::Image(ref img_bytes) => {
-                let _ = self.view.avatar(ids!(avatar)).show_image(
+                let _ = self.view.avatar(cx, ids!(avatar)).show_image(
                     cx,
                     None, // Avatars in a RoomsListEntry shouldn't be clickable.
                     |cx, img| utils::load_png_or_jpg(&img, cx, img_bytes),
@@ -368,7 +361,7 @@ impl RoomsListEntryContent {
         }
 
         self.view
-            .unread_badge(ids!(unread_badge))
+            .unread_badge(cx, ids!(unread_badge))
             .update_counts(false, 1, 0);
 
         self.draw_common(cx, &room_info.room_avatar, room_info.is_selected);
@@ -383,10 +376,10 @@ impl RoomsListEntryContent {
     ) {
         match room_avatar {
             FetchedRoomAvatar::Text(text) => {
-                self.view.avatar(ids!(avatar)).show_text(cx, None, None, text);
+                self.view.avatar(cx, ids!(avatar)).show_text(cx, None, None, text);
             }
             FetchedRoomAvatar::Image(img_bytes) => {
-                let _ = self.view.avatar(ids!(avatar)).show_image(
+                let _ = self.view.avatar(cx, ids!(avatar)).show_image(
                     cx,
                     None, // Avatars in a RoomsListEntry shouldn't be clickable.
                     |cx, img| utils::load_png_or_jpg(&img, cx, img_bytes),
@@ -406,85 +399,6 @@ impl RoomsListEntryContent {
 
     /// Updates the styling of the preview based on whether the room is selected or not.
     pub fn update_preview_colors(&mut self, cx: &mut Cx, is_selected: bool) {
-        let bg_color;
-        let message_text_color;
-        let room_name_color;
-        let timestamp_color;
-        let code_bg_color;
-
-        // TODO: This is quite verbose, makepad should provide a way to override this at a higher level.
-        if is_selected {
-            bg_color = vec4(0.059, 0.533, 0.996, 1.0); // COLOR_PRIMARY_SELECTED
-            message_text_color = vec3(1., 1., 1.); // COLOR_PRIMARY
-            room_name_color = vec3(1., 1., 1.); // COLOR_PRIMARY
-            timestamp_color = vec3(1., 1., 1.); // COLOR_PRIMARY
-            code_bg_color = vec3(0.3, 0.3, 0.3); // a darker gray, used for `code_color` and `quote_bg_color`
-        } else {
-            bg_color = vec4(0.0, 0.0, 0.0, 0.0); // TRANSPARENT
-            message_text_color = vec3(0.267, 0.267, 0.267); // MESSAGE_TEXT_COLOR
-            room_name_color = vec3(0., 0., 0.);
-            timestamp_color = vec3(0.6, 0.6, 0.6);
-            code_bg_color = vec3(0.929, 0.929, 0.929); // #EDEDED, see `code_color` and `quote_bg_color`
-        }
-
-        self.view.apply_over(
-            cx,
-            live!(
-                draw_bg: {
-                    color: (bg_color)
-                }
-            ),
-        );
-
-        // We check that the UI elements exist to avoid unnecessary updates, and prevent error logs.
-        if !self.view.label(ids!(room_name)).is_empty() {
-            self.view.label(ids!(room_name)).apply_over(
-                cx,
-                live!(
-                draw_text: {
-                    color: (room_name_color)
-                }
-                ),
-            );
-        }
-
-        if !self.view.label(ids!(timestamp)).is_empty() {
-            self.view.label(ids!(timestamp)).apply_over(
-                cx,
-                live!(
-                draw_text: {
-                    color: (timestamp_color)
-                }
-                ),
-            );
-        }
-
-        if !self.view.html_or_plaintext(ids!(latest_message)).is_empty() {
-            self.view.html_or_plaintext(ids!(latest_message)).apply_over(
-                cx,
-                live!(
-                html_view = {
-                    html = {
-                        font_color: (message_text_color),
-                        draw_normal:      { color: (message_text_color) },
-                        draw_italic:      { color: (message_text_color) },
-                        draw_bold:        { color: (message_text_color) },
-                        draw_bold_italic: { color: (message_text_color) },
-                        draw_block: {
-                            quote_bg_color: (code_bg_color),
-                            code_color: (code_bg_color),
-                        }
-                    }
-                }
-                plaintext_view = {
-                    pt_label = {
-                        draw_text: {
-                            color: (message_text_color)
-                        }
-                    }
-                }
-                ),
-            );
-        }
+        self.animator_toggle(cx, is_selected, Animate::No, ids!(selected.on), ids!(selected.off));
     }
 }
diff --git a/src/home/rooms_list_header.rs b/src/home/rooms_list_header.rs
index 916eaac70..a3dd87147 100644
--- a/src/home/rooms_list_header.rs
+++ b/src/home/rooms_list_header.rs
@@ -10,79 +10,76 @@ use matrix_sdk_ui::sync_service::State;
 
 use crate::{home::navigation_tab_bar::{NavigationBarAction, SelectedTab}, shared::{image_viewer::{ImageViewerAction, ImageViewerError, LoadState}, popup_list::{PopupKind, enqueue_popup_notification}}};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
 
-    pub RoomsListHeader = {{RoomsListHeader}} {
+    mod.widgets.RoomsListHeader = #(RoomsListHeader::register_widget(vm)) {
         width: Fill,
         height: 30,
-        padding: {bottom: 4}
+        padding: Inset{bottom: 4}
         flow: Right,
         visible: true,
-        align: {x: 0, y: 0.5}
+        align: Align{x: 0, y: 0.5}
         spacing: 3,
 
-        header_title = <Label> {
+        header_title := Label {
             width: Fill,
             height: Fit,
             flow: Right, // do not wrap
             text: "All Rooms"
-            draw_text: {
+            draw_text +: {
                 color: #x0
-                text_style: <TITLE_TEXT>{}
-                wrap: Ellipsis
+                text_style: TITLE_TEXT {}
+                flow: Flow.Right{wrap: true}
             }
         },
 
-        <View> {
+        View {
             width: Fit, height: Fit,
-            align: {x: 0, y: 0.5},
-            margin: {right: 3}
+            align: Align{x: 0, y: 0.5},
+            margin: Inset{right: 3}
             flow: Overlay,
 
-            loading_spinner = <LoadingSpinner> {
+            loading_spinner := LoadingSpinner {
                 visible: false,
                 width: 20,
                 height: 20,
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                     border_size: 3.0,
                 }
             }
 
-            offline_icon = <View> {
+            offline_icon := View {
                 visible: false,
                 width: Fit, height: Fit,
-                <Icon> {
-                    draw_icon: {
-                        svg_file: (ICON_CLOUD_OFFLINE),
+                Icon {
+                    draw_icon +: {
+                        svg: (ICON_CLOUD_OFFLINE),
                         color: (COLOR_FG_DANGER_RED),
                     }
-                    icon_walk: {width: 35, height: Fit, margin: {left: -5, bottom: 4}}
+                    icon_walk: Walk{width: 35, height: Fit, margin: Inset{left: -5, bottom: 4}}
                 }
             }
 
-            synced_icon = <View> {
+            synced_icon := View {
                 visible: true,
                 width: Fit, height: Fit,
-                <Icon> {
-                    draw_icon: {
-                        svg_file: (ICON_CLOUD_CHECKMARK),
+                Icon {
+                    draw_icon +: {
+                        svg: (ICON_CLOUD_CHECKMARK),
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: {width: 25, height: Fit, margin: {left: 1, bottom: 2}}
+                    icon_walk: Walk{width: 25, height: Fit, margin: Inset{left: 1, bottom: 2}}
                 }
             }
         }
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomsListHeader {
     #[deref] view: View,
 
@@ -100,9 +97,9 @@ impl Widget for RoomsListHeader {
                         if matches!(self.sync_state, State::Offline) {
                             continue;
                         }
-                        self.view.view(ids!(loading_spinner)).set_visible(cx, *is_syncing);
-                        self.view.view(ids!(synced_icon)).set_visible(cx, !*is_syncing);
-                        self.view.view(ids!(offline_icon)).set_visible(cx, false);
+                        self.view.view(cx, ids!(loading_spinner)).set_visible(cx, *is_syncing);
+                        self.view.view(cx, ids!(synced_icon)).set_visible(cx, !*is_syncing);
+                        self.view.view(cx, ids!(offline_icon)).set_visible(cx, false);
                         self.redraw(cx);
                         continue;
                     }
@@ -111,9 +108,9 @@ impl Widget for RoomsListHeader {
                             continue;
                         }
                         if matches!(new_state, State::Offline) {
-                            self.view.view(ids!(loading_spinner)).set_visible(cx, false);
-                            self.view.view(ids!(synced_icon)).set_visible(cx, false);
-                            self.view.view(ids!(offline_icon)).set_visible(cx, true);
+                            self.view.view(cx, ids!(loading_spinner)).set_visible(cx, false);
+                            self.view.view(cx, ids!(synced_icon)).set_visible(cx, false);
+                            self.view.view(cx, ids!(offline_icon)).set_visible(cx, true);
                             enqueue_popup_notification(
                                 "Cannot reach the Matrix homeserver. Please check your connection.",
                                 PopupKind::Error,
@@ -130,7 +127,7 @@ impl Widget for RoomsListHeader {
                 }
 
                 if let Some(NavigationBarAction::TabSelected(tab)) = action.downcast_ref() {
-                    let header_title = self.view.label(ids!(header_title));
+                    let header_title = self.view.label(cx, ids!(header_title));
                     match tab {
                         SelectedTab::Space { space_name_id } => {
                             header_title.set_text(cx, &space_name_id.to_string());
diff --git a/src/home/rooms_sidebar.rs b/src/home/rooms_sidebar.rs
index 592ea16d6..b4913e5b4 100644
--- a/src/home/rooms_sidebar.rs
+++ b/src/home/rooms_sidebar.rs
@@ -11,60 +11,53 @@ use makepad_widgets::*;
 
 use crate::home::rooms_list::RoomsListWidgetExt;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::room_filter_input_bar::RoomFilterInputBar;
-    use crate::home::search_messages::*;
-    use crate::home::rooms_list::RoomsList;
-    use crate::home::rooms_list_header::RoomsListHeader;
-
-    pub RoomsSideBar = {{RoomsSideBar}}<AdaptiveView> {
-        Desktop = <View> {
-            padding: {top: 20, left: 10, right: 10}
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.RoomsSideBar = #(RoomsSideBar::register_widget(vm)) {
+        Desktop := View {
+            padding: Inset{top: 20, left: 10, right: 10}
             flow: Down, spacing: 5
             width: Fill, height: Fill
 
             show_bg: true,
-            draw_bg: {
-                instance bg_color: (COLOR_PRIMARY_DARKER)
-                instance border_color: #f2f2f2
-                instance border_size: 0.003
+            draw_bg +: {
+                color: uniform((COLOR_PRIMARY_DARKER))
+                border_color: uniform(#f2f2f2)
+                border_size: uniform(0.003)
 
                 // Draws a right-side border
-                fn pixel(self) -> vec4 {
+                pixel: fn() {
                     if self.pos.x > 1.0 - self.border_size {
                         return self.border_color;
                     } else {
-                        return self.bg_color;
+                        return self.color;
                     }
                 }
             }
 
-            <CachedWidget> {
-                rooms_list_header = <RoomsListHeader> {}
+            CachedWidget {
+                rooms_list_header := RoomsListHeader {}
             }
-            <CachedWidget> {
-                rooms_list = <RoomsList> {}
+            CachedWidget {
+                rooms_list := RoomsList {}
             }
         },
 
-        Mobile = <View> {
+        Mobile := View {
             width: Fill, height: Fill
             flow: Down,
             
-            <RoundedShadowView> {
+            RoundedShadowView {
                 width: Fill, height: Fit
-                padding: {top: 15, left: 15, right: 15, bottom: 10}
+                padding: Inset{top: 15, left: 15, right: 15, bottom: 10}
                 flow: Down,
 
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_PRIMARY_DARKER),
+                draw_bg +: {
+                    color: instance((COLOR_PRIMARY_DARKER)),
                     border_radius: 4.0,
                     border_size: 0.0
                     shadow_color: #0005
@@ -72,33 +65,33 @@ live_design! {
                     shadow_offset: vec2(1.0, 0.0),
                 }
 
-                <View> { height: 20 }
+                View { height: 20 }
 
-                <CachedWidget> {
-                    rooms_list_header = <RoomsListHeader> {}
+                CachedWidget {
+                    rooms_list_header := RoomsListHeader {}
                 }
 
-                <View> {
+                View {
                     width: Fill,
                     height: 39,
                     flow: Right
-                    padding: {top: 2, bottom: 2}
+                    padding: Inset{top: 2, bottom: 2}
                     spacing: 5 
-                    align: {y: 0.5}
+                    align: Align{y: 0.5}
 
-                    <CachedWidget> {
-                        room_filter_input_bar = <RoomFilterInputBar> {}
+                    CachedWidget {
+                        room_filter_input_bar := RoomFilterInputBar {}
                     }
 
-                    search_messages_button = <SearchMessagesButton> { }
+                    search_messages_button := SearchMessagesButton { }
                 }
             }
 
-            <View> {
-                padding: {left: 15, right: 15}
+            View {
+                padding: Inset{left: 15, right: 15}
 
-                <CachedWidget> {
-                    rooms_list = <RoomsList> {}
+                CachedWidget {
+                    rooms_list := RoomsList {}
                 }
             }
         }
@@ -112,21 +105,15 @@ live_design! {
 /// * In the desktop view, it is a permanent tab in the dock,
 ///   showing only the title label and the RoomsList
 ///   (because the search bar is at the top of the HomeScreen).
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomsSideBar {
     #[deref] view: AdaptiveView,
 }
 
-impl LiveHook for RoomsSideBar {
-    fn after_new_from_doc(&mut self, cx: &mut Cx) {
-        // Here we set the global singleton for the RoomsList widget,
-        // which is used to access the list of rooms from anywhere in the app.
-        Cx::set_global(cx, self.view.rooms_list(ids!(rooms_list)));
-    }
-}
-
 impl Widget for RoomsSideBar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        // Keep the global RoomsList handle available for cross-widget access.
+        Cx::set_global(cx, self.view.rooms_list(cx, ids!(rooms_list)));
         self.view.handle_event(cx, event, scope);
     }
 
@@ -134,4 +121,3 @@ impl Widget for RoomsSideBar {
         self.view.draw_walk(cx, scope, walk)
     }
 }
-
diff --git a/src/home/search_messages.rs b/src/home/search_messages.rs
index 51928fd75..6b03f5fbf 100644
--- a/src/home/search_messages.rs
+++ b/src/home/search_messages.rs
@@ -3,37 +3,35 @@
 
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::*;
 
-    pub SearchMessagesButton = {{SearchMessagesButton}}<RobrixIconButton> {
+    mod.widgets.SearchMessagesButton = set_type_default() do #(SearchMessagesButton::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fit,
         height: 35,
         margin: 0
         enabled: false
 
-        draw_bg: {
-            color: (COLOR_BG_DISABLED)
+        draw_bg +: {
+            color: instance((COLOR_BG_DISABLED))
             // color: (COLOR_ROBRIX_PURPLE) // or `color: (COLOR_ACTIVE_PRIMARY)`
             // color_hover: (COLOR_PRIMARY_DARKER) // make it whiter (this value is mixed in with `color`)
         }
-        draw_icon: {
-            svg_file: (ICON_SEARCH)
+        draw_icon +: {
+            svg: (ICON_SEARCH)
             color: (COLOR_FG_DISABLED)
             // color: (COLOR_PRIMARY),
             // color_hover: (COLOR_PRIMARY),
         }
-        icon_walk: {width: 16, height: 16, margin: {left: -1, right: -2} }
+        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -1, right: -2} }
 
         // text: "Search Messages"
         text: "Search (TODO)"
-        draw_text: {
+        draw_text +: {
             color: (COLOR_FG_DISABLED)
             // color: (COLOR_PRIMARY),
             // color_hover: (COLOR_PRIMARY),
@@ -43,7 +41,7 @@ live_design! {
     
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct SearchMessagesButton {
     #[deref] button: Button,
 }
diff --git a/src/home/space_lobby.rs b/src/home/space_lobby.rs
index 47ae3195a..132cfaf2e 100644
--- a/src/home/space_lobby.rs
+++ b/src/home/space_lobby.rs
@@ -10,6 +10,7 @@ use std::cell::RefCell;
 use std::collections::{BTreeMap, HashMap, HashSet};
 use imbl::Vector;
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 use matrix_sdk::{RoomDisplayName, RoomState, ruma::OwnedRoomId};
 use matrix_sdk_ui::spaces::SpaceRoom;
 use ruma::room::JoinRuleSummary;
@@ -31,44 +32,41 @@ use crate::{
 };
 
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    ICON_COLLAPSE = dep("crate://self/resources/icons/triangle_fill.svg")
+    mod.widgets.SPACE_LOBBY_ICON_COLLAPSE = crate_resource("self://resources/icons/triangle_fill.svg")
 
     // An entry in the RoomsList that will show the SpaceLobby when clicked.
-    pub SpaceLobbyEntry = {{SpaceLobbyEntry}}<RoundedView> {
+    mod.widgets.SpaceLobbyEntry = set_type_default() do #(SpaceLobbyEntry::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         visible: false, // only visible when a space is selected
         width: Fill,
         height: 35, // same as CollapsibleHeader
         flow: Right,
-        align: {y: 0.5}
+        align: Align{y: 0.5}
         padding: 5,
-        margin: {top: 10, bottom: 0}
-        cursor: Hand
+        margin: Inset{top: 10, bottom: 0}
+        cursor: MouseCursor.Hand
 
         show_bg: true
-        draw_bg: {
-            instance hover: 0.0
-            instance active: 0.0
+        draw_bg +: {
+            hover: instance(0.0)
+            active: instance(0.0)
 
-            color: (COLOR_NAVIGATION_TAB_BG)
-            uniform color_hover: (COLOR_NAVIGATION_TAB_BG_HOVER)
-            uniform color_active: (COLOR_ACTIVE_PRIMARY)
+            color: uniform((COLOR_NAVIGATION_TAB_BG))
+            color_hover: uniform((COLOR_NAVIGATION_TAB_BG_HOVER))
+            color_active: uniform((COLOR_ACTIVE_PRIMARY))
 
-            border_size: 0.0
-            border_color: #0000
-            uniform inset: vec4(0.0, 0.0, 0.0, 0.0)
-            border_radius: 4.0
+            border_size: uniform(0.0)
+            border_color: uniform(#0000)
+            inset: uniform(vec4(0.0))
+            border_radius: uniform(4.0)
 
-            fn get_color(self) -> vec4 {
+            get_color: fn() -> vec4 {
                 return mix(
                     mix(
                         self.color,
@@ -80,12 +78,12 @@ live_design! {
                 )
             }
 
-            fn get_border_color(self) -> vec4 {
+            get_border_color: fn() -> vec4 {
                 return self.border_color
             }
 
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                 sdf.box(
                     self.inset.x + self.border_size,
                     self.inset.y + self.border_size,
@@ -101,23 +99,23 @@ live_design! {
             }
         }
 
-        icon = <Icon> {
+        icon := Icon {
             width: 25,
             height: 25,
-            margin: {left: 5, right: 3}
-            align: {x: 0.5, y: 0.5}
-            draw_icon: {
-                svg_file: (ICON_HIERARCHY)
+            margin: Inset{left: 5, right: 3}
+            align: Align{x: 0.5, y: 0.5}
+            draw_icon +: {
+                svg: (ICON_HIERARCHY)
 
-                instance active: 0.0
-                instance hover: 0.0
-                instance down: 0.0
+                active: instance(0.0)
+                hover: instance(0.0)
+                down: instance(0.0)
 
                 color: (COLOR_TEXT)
-                uniform color_hover: (COLOR_TEXT)
-                uniform color_active: (COLOR_PRIMARY)
+                color_hover: uniform((COLOR_TEXT))
+                color_active: uniform((COLOR_PRIMARY))
 
-                fn get_color(self) -> vec4 {
+                get_color: fn() -> vec4 {
                     return mix(
                         mix(
                             self.color,
@@ -129,27 +127,27 @@ live_design! {
                     )
                 }
             }
-            icon_walk: { width: 25, height: 20, margin: {left: 0, bottom: 0} }
+            icon_walk: Walk{ width: 25, height: 20, margin: Inset{left: 0, bottom: 0} }
         }
 
-        space_lobby_label = <Label> {
+        space_lobby_label := Label {
             width: Fill, height: Fit
             flow: Right,
             padding: 0,
 
-            draw_text: {
-                instance active: 0.0
-                instance hover: 0.0
-                instance down: 0.0
+            draw_text +: {
+                active: instance(0.0)
+                hover: instance(0.0)
+                down: instance(0.0)
 
                 color: (COLOR_TEXT)
-                uniform color_hover: (COLOR_TEXT)
-                uniform color_active: (COLOR_PRIMARY)
+                color_hover: uniform((COLOR_TEXT))
+                color_active: uniform((COLOR_PRIMARY))
 
-                text_style: <REGULAR_TEXT>{font_size: 11},
-                wrap: Ellipsis,
+                text_style: REGULAR_TEXT {font_size: 11},
+                flow: Flow.Right{wrap: true},
 
-                fn get_color(self) -> vec4 {
+                get_color: fn() -> vec4 {
                     return mix(
                         mix(
                             self.color,
@@ -164,31 +162,31 @@ live_design! {
             text: "Explore this Space"
         }
 
-        animator: {
-            hover = {
-                default: off
-                off = {
+        animator: Animator{
+            hover: {
+                default: @off
+                off: AnimatorState{
                     from: {all: Forward {duration: 0.15}}
                     apply: {
                         draw_bg: {down: [{time: 0.0, value: 0.0}], hover: 0.0}
-                        space_lobby_label = { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 0.0} }
-                        icon = { draw_icon: {down: [{time: 0.0, value: 0.0}], hover: 0.0} }
+                        space_lobby_label: { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 0.0} }
+                        icon: { draw_icon: {down: [{time: 0.0, value: 0.0}], hover: 0.0} }
                     }
                 }
-                on = {
+                on: AnimatorState{
                     from: {all: Snap}
                     apply: {
                         draw_bg: {down: [{time: 0.0, value: 0.0}], hover: 1.0}
-                        space_lobby_label = { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 1.0} }
-                        icon = { draw_icon: {down: [{time: 0.0, value: 0.0}], hover: 1.0} }
+                        space_lobby_label: { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 1.0} }
+                        icon: { draw_icon: {down: [{time: 0.0, value: 0.0}], hover: 1.0} }
                     }
                 }
-                down = {
+                down: AnimatorState{
                     from: {all: Forward {duration: 0.2}}
                     apply: {
                         draw_bg: {down: [{time: 0.0, value: 1.0}], hover: 1.0,}
-                        space_lobby_label = { draw_text: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
-                        icon = { draw_icon: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
+                        space_lobby_label: { draw_text: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
+                        icon: { draw_icon: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
                     }
                 }
             }
@@ -196,17 +194,22 @@ live_design! {
     }
 
     // A view that draws the hierarchical tree structure lines.
-    DrawTreeLine = {{DrawTreeLine}} { }
+    let DrawTreeLine = set_type_default() do #(DrawTreeLine::script_shader(vm)){
+        ..mod.draw.DrawQuad
+    }
+
+    let TreeLines = set_type_default() do #(TreeLines::register_widget(vm)) {
+        ..mod.widgets.SolidView
 
-    TreeLines = {{TreeLines}} {
         width: 0, height: Fill
-        draw_bg: {
+
+        draw_bg: DrawTreeLine {
             indent_width: 44.0
             level: 0.0
             is_last: 0.0
             parent_mask: 0.0
 
-            fn pixel(self) -> vec4 {
+            pixel: fn() {
                 let pos = self.pos * self.rect_size;
                 let indent = self.indent_width;
                 // Yes, this should be 0.5, but 0.6 makes it line up nicely
@@ -215,33 +218,36 @@ live_design! {
                 let line_width = 1.0;
                 let half_line = 0.5;
 
-                let c = vec4(0.0);
+                let mut c = vec4(0.0);
 
                 // Dumb approach, but it works.
                 for i in 0..20 {
-                    if float(i) > self.level { break; }
+                    if f32(i) > self.level { break; }
                     
-                    if float(i) < self.level {
+                    if f32(i) < self.level {
                         // Check mask for parent levels
-                        let mask_bit = mod(floor(self.parent_mask / pow(2.0, float(i))), 2.0);
+                        let mask_bit = modf(floor(self.parent_mask / pow(2.0, f32(i))), 2.0);
                         if mask_bit > 0.5 {
-                             // Draw full vertical line
-                             if abs(pos.x - (float(i) * indent + half_indent)) < half_line && pos.y < self.rect_size.y {
-                                  return vec4(0.8, 0.8, 0.8, 1.0);
-                             }
+                            // Draw full vertical line
+                            if abs(pos.x - (f32(i) * indent + half_indent)) < half_line && pos.y < self.rect_size.y {
+                                c = vec4(0.8, 0.8, 0.8, 1.0);
+                                break;
+                            }
                         }
                     } else {
                         // Current level: connection to self
                         
                         // Horizontal line to content
                         let hy = self.rect_size.y * 0.5;
-                        if abs(pos.y - hy) < half_line && pos.x > (float(i) * indent + half_indent) {
-                             return vec4(0.8, 0.8, 0.8, 1.0);
+                        if abs(pos.y - hy) < half_line && pos.x > (f32(i) * indent + half_indent) {
+                            c = vec4(0.8, 0.8, 0.8, 1.0);
+                            break;
                         }
                         
                         // Vertical line (L shape)
-                        if abs(pos.x - (float(i) * indent + half_indent)) < half_line && pos.y < (self.rect_size.y * (1.0 - 0.5 * self.is_last)) {
-                              return vec4(0.8, 0.8, 0.8, 1.0);
+                        if abs(pos.x - (f32(i) * indent + half_indent)) < half_line && pos.y < (self.rect_size.y * (1.0 - 0.5 * self.is_last)) {
+                            c = vec4(0.8, 0.8, 0.8, 1.0);
+                            break;
                         }
                     }
                 }
@@ -251,117 +257,119 @@ live_design! {
     }
 
     // Entry for a child subspace (can be expanded)
-    pub SubspaceEntry = {{SubspaceEntry}} {
+    let SubspaceEntry = set_type_default() do #(SubspaceEntry::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill,
         height: 44,
         flow: Right,
-        align: {y: 0.5}
-        padding: {left: 8, right: 12}
-        cursor: Hand
+        align: Align{y: 0.5}
+        padding: Inset{left: 8, right: 12}
+        cursor: MouseCursor.Hand
 
         show_bg: true
-        draw_bg: {
-            instance hover: 0.0
-            color: #fff
-            uniform color_hover: #f5f5f5
-            fn pixel(self) -> vec4 {
+        draw_bg +: {
+            hover: instance(0.0)
+            color: uniform(#fff)
+            color_hover: uniform(#f5f5f5)
+            pixel: fn() {
                 return mix(self.color, self.color_hover, self.hover);
             }
         }
 
         // The connecting hierarchical lines on the left.
-        tree_lines = <TreeLines> {}
+        tree_lines := TreeLines {}
 
         // Expand/collapse icon
-        expand_icon = <IconRotated> {
+        expand_icon := IconRotated {
             width: 16,
             height: 16,
-            margin: { top: 7, left: -8, right: 2 }
-            draw_icon: {
-                svg_file: (ICON_COLLAPSE)
+            margin: Inset{ top: 7, left: -8, right: 2 }
+            draw_icon +: {
+                svg: (mod.widgets.SPACE_LOBBY_ICON_COLLAPSE)
                 rotation_angle: 90.0
                 color: #888
             }
-            icon_walk: { width: 10, height: 10 }
+            icon_walk: Walk{ width: 10, height: 10 }
         }
 
-        avatar = <Avatar> { width: 32, height: 32, margin: {right: 8} }
+        avatar := Avatar { width: 32, height: 32, margin: Inset{right: 8} }
 
-        content = <View> {
+        content := View {
             width: Fill
             height: Fit
             flow: Down
             spacing: 5,
-            name_label = <Label> {
+            name_label := Label {
                 width: Fill, height: Fit,
                 flow: Right
                 margin: 0
                 padding: 0
-                draw_text: { text_style: <REGULAR_TEXT>{font_size: 10.5}, color: #1a1a1a, wrap: Ellipsis }
+                draw_text +: { text_style: REGULAR_TEXT {font_size: 10.5}, color: #1a1a1a, flow: Flow.Right{wrap: true} }
             }
-            info_label = <Label> {
+            info_label := Label {
                 width: Fit, height: Fit,
                 flow: Right
                 margin: 0
                 padding: 0
-                draw_text: { text_style: <REGULAR_TEXT>{font_size: 8.5}, color: #737373, wrap: Ellipsis }
+                draw_text +: { text_style: REGULAR_TEXT {font_size: 8.5}, color: #737373, flow: Flow.Right{wrap: true} }
             }
         }
 
-        buttons_view = <View> {
+        buttons_view := View {
             width: Fit,
             height: Fit,
             flow: Right,
             spacing: 8,
-            align: {x: 1.0, y: 0.5}
-            margin: {left: 8}
+            align: Align{x: 1.0, y: 0.5}
+            margin: Inset{left: 8}
             visible: false
 
-            join_button = <RobrixIconButton> {
+            join_button := RobrixIconButton {
                 width: Fit,
                 padding: 8
                 spacing: 0
-                icon_walk: {width: 0, height: 0}
-                draw_bg: {
+                icon_walk: Walk{width: 0, height: 0}
+                draw_bg +: {
                     border_size: 0.75
-                    border_color: (COLOR_FG_ACCEPT_GREEN)
-                    color: (COLOR_BG_ACCEPT_GREEN)
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN))
+                    color: instance((COLOR_BG_ACCEPT_GREEN))
                 }
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{font_size: 9.5},
+                draw_text +: {
+                    text_style: REGULAR_TEXT {font_size: 9.5},
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
                 text: "Join"
             }
 
-            view_button = <RobrixIconButton> {
+            view_button := RobrixIconButton {
                 width: Fit,
                 padding: 8
                 spacing: 0
-                icon_walk: {width: 0, height: 0}
-                draw_bg: {
+                icon_walk: Walk{width: 0, height: 0}
+                draw_bg +: {
                     border_size: 0.0
-                    color: (COLOR_ACTIVE_PRIMARY)
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{font_size: 9.5},
+                draw_text +: {
+                    text_style: REGULAR_TEXT {font_size: 9.5},
                     color: (COLOR_PRIMARY),
                 }
                 text: "View"
             }
 
-            leave_button = <RobrixIconButton> {
+            leave_button := RobrixIconButton {
                 width: Fit,
                 padding: 8
                 spacing: 0
-                icon_walk: {width: 0, height: 0}
-                draw_bg: {
+                icon_walk: Walk{width: 0, height: 0}
+                draw_bg +: {
                     border_size: 0.75
-                    border_color: (COLOR_FG_DANGER_RED)
-                    color: (COLOR_BG_DANGER_RED)
+                    border_color: instance((COLOR_FG_DANGER_RED))
+                    color: instance((COLOR_BG_DANGER_RED))
                 }
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{font_size: 9.5},
+                draw_text +: {
+                    text_style: REGULAR_TEXT {font_size: 9.5},
                     color: (COLOR_FG_DANGER_RED),
                 }
                 text: "Leave"
@@ -369,79 +377,79 @@ live_design! {
         }
 
 
-        animator: {
-            hover = {
-                default: off
-                off = { from: {all: Forward {duration: 0.1}}, apply: { draw_bg: {hover: 0.0} } }
-                on = { from: {all: Snap}, apply: { draw_bg: {hover: 1.0} } }
+        animator: Animator{
+            hover: {
+                default: @off
+                off: AnimatorState{ from: {all: Forward {duration: 0.1}}, apply: { draw_bg: {hover: 0.0} } }
+                on: AnimatorState{ from: {all: Snap}, apply: { draw_bg: {hover: 1.0} } }
             }
         }
     }
 
     // Entry for a child room within a space, which cannot be expanded.
-    pub RoomEntry = <SubspaceEntry> {
-        cursor: Default
+    let RoomEntry = SubspaceEntry {
+        cursor: MouseCursor.Default
 
-        expand_icon = <View> {
+        expand_icon := View {
             width: 10
             height: 16
         }
     }
 
-    StatusLabel = <View> {
+    mod.widgets.SpaceLobbyStatusLabel = View {
         width: Fill, height: Fit,
         flow: Right,
-        align: { x: 0.5, y: 0.5 }
+        align: Align{ x: 0.5, y: 0.5 }
         padding: 20.0,
 
-        loading_spinner = <LoadingSpinner> {
+        loading_spinner := LoadingSpinner {
             width: 18,
             height: 18,
-            draw_bg: {
-                color: (COLOR_ACTIVE_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_ACTIVE_PRIMARY))
                 border_size: 2.5,
             }
         }
 
-        label = <Label> {
-            padding: {left: 10}
+        label := Label {
+            padding: Inset{left: 10}
             width: Fit,
-            flow: RightWrap,
-            align: { x: 0.5, y: 0.5 }
-            draw_text: {
-                wrap: Word,
+            flow: Flow.Right{wrap: true},
+            align: Align{ x: 0.5, y: 0.5 }
+            draw_text +: {
+                flow: Flow.Right{wrap: true},
                 color: #737373,
-                text_style: <REGULAR_TEXT>{font_size: 10}
+                text_style: REGULAR_TEXT {font_size: 10}
             }
             text: "Loading rooms and spaces..."
         }
     }
 
     // Small loading indicator shown inline when loading subspace children
-    SubspaceLoadingEntry = <View> {
+    mod.widgets.SubspaceLoadingEntry = View {
         width: Fill, height: 36,
         flow: Right,
-        align: { y: 0.5 }
-        padding: {left: 8, right: 12}
+        align: Align{ y: 0.5 }
+        padding: Inset{left: 8, right: 12}
 
         // Tree lines replace the spacer
-        tree_lines = <TreeLines> {}
+        tree_lines := TreeLines {}
 
-        loading_spinner = <LoadingSpinner> {
+        loading_spinner := LoadingSpinner {
             width: 14,
             height: 14,
-            margin: {left: 8, right: 10}
-            draw_bg: {
-                color: (COLOR_ACTIVE_PRIMARY)
+            margin: Inset{left: 8, right: 10}
+            draw_bg +: {
+                color: instance((COLOR_ACTIVE_PRIMARY))
                 border_size: 2.0,
             }
         }
 
-        label = <Label> {
+        label := Label {
             width: Fit,
             height: Fit,
-            draw_text: {
-                text_style: <REGULAR_TEXT>{font_size: 9},
+            draw_text +: {
+                text_style: REGULAR_TEXT {font_size: 9},
                 color: #888,
             }
             text: "Loading..."
@@ -449,82 +457,82 @@ live_design! {
     }
 
     // The main view that shows the lobby (homepage) for a space.
-    pub SpaceLobbyScreen = {{SpaceLobbyScreen}} {
+    mod.widgets.SpaceLobbyScreen = set_type_default() do #(SpaceLobbyScreen::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill, height: Fill,
         flow: Down,
 
         show_bg: true
-        draw_bg: {
-            color: #fff
-        }
+        draw_bg.color: #fff
 
         // Header with parent space info
-        header = <View> {
+        header := SolidView {
             width: Fill,
             height: Fit,
             flow: Down,
-            padding: {left: 16, right: 16, top: 16, bottom: 8}
+            padding: Inset{left: 16, right: 16, top: 16, bottom: 8}
 
             show_bg: true,
-            draw_bg: {
-                color: (COLOR_BG_PREVIEW)
+            draw_bg +: {
+                color: instance((COLOR_BG_PREVIEW))
             }
 
-            space_info_label = <Label> {
+            space_info_label := Label {
                 width: Fill,
                 height: Fit,
-                margin: {left: 2}
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{font_size: 10},
+                margin: Inset{left: 2}
+                draw_text +: {
+                    text_style: REGULAR_TEXT {font_size: 10},
                     color: #737373,
-                    wrap: Ellipsis,
+                    flow: Flow.Right{wrap: true},
                 }
                 text: "Welcome to the space:"
             }
             
-            parent_space_row = <View> {
+            parent_space_row := View {
                 width: Fill,
                 height: Fit,
                 flow: Right,
-                align: { y: 0.5 }
-                padding: { top: 8 }
+                align: Align{ y: 0.5 }
+                padding: Inset{ top: 8 }
                 
-                parent_avatar = <Avatar> {
+                parent_avatar := Avatar {
                     width: 36,
                     height: 36,
-                    margin: { right: 12 }
+                    margin: Inset{ right: 12 }
                 }
                 
-                parent_name = <Label> {
+                parent_name := Label {
                     width: Fill,
                     height: Fit,
-                    margin: {top: 4} // vertically center-align with the avatar
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 14},
+                    margin: Inset{top: 4} // vertically center-align with the avatar
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 14},
                         color: #1a1a1a,
-                        wrap: Ellipsis,
+                        flow: Flow.Right{wrap: true},
                     }
                     text: ""
                 }
 
-                invite_button = <RobrixIconButton> {
+                invite_button := RobrixIconButton {
                     width: Fit
-                    align: {x: 0.5, y: 0.5}
-                    margin: {left: 6}
+                    align: Align{x: 0.5, y: 0.5}
+                    margin: Inset{left: 6}
                     padding: 12,
-                    draw_icon: {
-                        svg_file: (ICON_ADD_USER)
+                    draw_icon +: {
+                        svg: (ICON_ADD_USER)
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
+                    draw_bg +: {
                         border_size: 0.75
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: (COLOR_BG_ACCEPT_GREEN)
+                        border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                        color: instance((COLOR_BG_ACCEPT_GREEN))
                     }
                     text: "Invite"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
                 }
@@ -532,7 +540,7 @@ live_design! {
         }
 
         // The hierarchical tree list
-        tree_list = <PortalList> {
+        tree_list := PortalList {
             keep_invisible: false,
             max_pull_down: 0.0,
             auto_tail: false,
@@ -540,11 +548,11 @@ live_design! {
             flow: Down,
             spacing: 0.0
 
-            subspace_entry = <SubspaceEntry> {}
-            room_entry = <RoomEntry> {}
-            subspace_loading = <SubspaceLoadingEntry> {}
-            status_label = <StatusLabel> {}
-            bottom_filler = <View> {
+            subspace_entry := SubspaceEntry {}
+            room_entry := RoomEntry {}
+            subspace_loading := mod.widgets.SubspaceLoadingEntry {}
+            status_label := mod.widgets.SpaceLobbyStatusLabel {}
+            bottom_filler := View {
                 width: Fill,
                 height: 80.0,
             }
@@ -570,8 +578,9 @@ struct SpaceLobbyUiState {
 
 
 /// A clickable entry shown in the RoomsList that will show the space lobby when clicked.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct SpaceLobbyEntry {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 }
@@ -619,7 +628,7 @@ pub enum SpaceLobbyAction {
     SpaceLobbyEntryClicked,
 }
 
-#[derive(Live, LiveHook, LiveRegister)]
+#[derive(Script, ScriptHook)]
 #[repr(C)]
 pub struct DrawTreeLine {
     #[deref] draw_super: DrawQuad,
@@ -629,7 +638,7 @@ pub struct DrawTreeLine {
     #[live] parent_mask: f32,
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct TreeLines {
     #[redraw] #[live] draw_bg: DrawTreeLine,
     #[walk] walk: Walk,
@@ -649,8 +658,9 @@ impl Widget for TreeLines {
 }
 
 /// A clickable entry for a child subspace.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct SubspaceEntry {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
     #[rust] room_id: Option<OwnedRoomId>,
@@ -661,23 +671,31 @@ pub struct SubspaceEntry {
 /// Actions emitted when a `SubspaceEntry` or its buttons are clicked.
 ///
 /// These *are* all widget actions.
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum SubspaceEntryAction {
     SpaceClicked { space_id: OwnedRoomId },
     RoomClicked  { room_id: OwnedRoomId },
     JoinClicked  { room_id: OwnedRoomId, is_space: bool },
     LeaveClicked { room_id: OwnedRoomId, is_space: bool },
     ViewClicked  { room_id: OwnedRoomId },
+    #[default]
     None,
 }
 
+impl ActionDefaultRef for SubspaceEntryAction {
+    fn default_ref() -> &'static Self {
+        static DEFAULT: SubspaceEntryAction = SubspaceEntryAction::None;
+        &DEFAULT
+    }
+}
+
 impl Widget for SubspaceEntry {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         if self.animator_handle_event(cx, event).must_redraw() {
             self.redraw(cx);
         }
 
-        let buttons_view_rect = self.view.view(ids!(buttons_view)).area().rect(cx);
+        let buttons_view_rect = self.view.view(cx, ids!(buttons_view)).area().rect(cx);
         let are_buttons_visible = self.show_buttons_view;
         match event.hits_with_test(cx, self.view.area(), |abs, rect, _| {
             rect.contains(abs) && !(are_buttons_visible && buttons_view_rect.contains(abs))
@@ -686,7 +704,7 @@ impl Widget for SubspaceEntry {
                 self.animator_play(cx, ids!(hover.on));
                 if !self.show_buttons_view {
                     self.show_buttons_view = true;
-                    self.view.view(ids!(buttons_view)).set_visible(cx, true);
+                    self.view.view(cx, ids!(buttons_view)).set_visible(cx, true);
                     self.redraw(cx);
                 }
             }
@@ -695,7 +713,7 @@ impl Widget for SubspaceEntry {
             Hit::FingerHoverOver(_) if !self.show_buttons_view => {
                 self.animator_play(cx, ids!(hover.on));
                 self.show_buttons_view = true;
-                self.view.view(ids!(buttons_view)).set_visible(cx, true);
+                self.view.view(cx, ids!(buttons_view)).set_visible(cx, true);
                 self.redraw(cx);
             }
             Hit::FingerHoverOut(fe) => {
@@ -707,7 +725,7 @@ impl Widget for SubspaceEntry {
                 if !entry_rect.contains(fe.abs) && !is_over_buttons_view {
                     self.animator_play(cx, ids!(hover.off));
                     self.show_buttons_view = false;
-                    self.view.view(ids!(buttons_view)).set_visible(cx, false);
+                    self.view.view(cx, ids!(buttons_view)).set_visible(cx, false);
                     self.redraw(cx);
                 }
             }
@@ -716,12 +734,11 @@ impl Widget for SubspaceEntry {
             }
             Hit::FingerUp(fe) if fe.is_over && fe.is_primary_hit() && fe.was_tap() => {
                 let is_within_buttons_view = self.show_buttons_view
-                    && self.view.view(ids!(buttons_view)).area().rect(cx).contains(fe.abs);
+                    && self.view.view(cx, ids!(buttons_view)).area().rect(cx).contains(fe.abs);
                 if !is_within_buttons_view {
                     if let Some(room_id) = self.room_id.as_ref() {
                         cx.widget_action(
-                            self.widget_uid(),
-                            &scope.path, 
+                            self.widget_uid(),  
                             if self.is_space {
                                 SubspaceEntryAction::SpaceClicked { space_id: room_id.clone() }
                             } else {
@@ -737,16 +754,15 @@ impl Widget for SubspaceEntry {
         self.view.handle_event(cx, event, scope);
 
         if let Event::Actions(actions) = event {
-            let join_button = self.view.button(ids!(buttons_view.join_button));
-            let leave_button = self.view.button(ids!(buttons_view.leave_button));
-            let view_button = self.view.button(ids!(buttons_view.view_button));
+            let join_button = self.view.button(cx, ids!(buttons_view.join_button));
+            let leave_button = self.view.button(cx, ids!(buttons_view.leave_button));
+            let view_button = self.view.button(cx, ids!(buttons_view.view_button));
 
             if join_button.clicked(actions) {
                 if let Some(room_id) = self.room_id.clone() {
                     join_button.reset_hover(cx);
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         SubspaceEntryAction::JoinClicked { room_id, is_space: self.is_space },
                     );
                 }
@@ -755,8 +771,7 @@ impl Widget for SubspaceEntry {
                 if let Some(room_id) = self.room_id.clone() {
                     leave_button.reset_hover(cx);
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         SubspaceEntryAction::LeaveClicked { room_id, is_space: self.is_space },
                     );
                 }
@@ -765,8 +780,7 @@ impl Widget for SubspaceEntry {
                 if let Some(room_id) = self.room_id.clone() {
                     view_button.reset_hover(cx);
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         SubspaceEntryAction::ViewClicked { room_id },
                     );
                 }
@@ -854,7 +868,7 @@ enum TreeEntry {
 }
 
 /// The view showing the lobby/homepage for a given space.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct SpaceLobbyScreen {
     #[deref] view: View,
 
@@ -902,7 +916,7 @@ impl Widget for SpaceLobbyScreen {
                     // Handle receiving top-level space details (join rule, member count).
                     Some(SpaceRoomListAction::TopLevelSpaceDetails(sr)) => {
                         if self.space_name_id.as_ref().is_some_and(|sni| sni.room_id() == &sr.room_id) {
-                            self.view.label(ids!(header.space_info_label)).set_text(cx, &format!(
+                            self.view.label(cx, ids!(header.space_info_label)).set_text(cx, &format!(
                                 "{}  ·  {} {}",
                                 match sr.join_rule {
                                     Some(JoinRuleSummary::Public) => "🌐  Public space",
@@ -981,7 +995,7 @@ impl Widget for SpaceLobbyScreen {
             }
 
             // Handle the invite button being clicked in the header.
-            if self.view.button(ids!(header.parent_space_row.invite_button)).clicked(actions) {
+            if self.view.button(cx, ids!(header.parent_space_row.invite_button)).clicked(actions) {
                 if let Some(space_name_id) = self.space_name_id.as_ref() {
                     cx.action(InviteModalAction::Open(space_name_id.clone()));
                 }
@@ -1007,14 +1021,14 @@ impl Widget for SpaceLobbyScreen {
                 // Draw loading indicator
                 let item = if self.is_loading && item_id == 0 {
                     let item = list.item(cx, item_id, id!(status_label));
-                    item.label(ids!(label)).set_text(cx, "Loading rooms and spaces...");
+                    item.label(cx, ids!(label)).set_text(cx, "Loading rooms and spaces...");
                     item
                 }
                 // No entries found
                 else if entry_count == 0 && item_id == 0 {
                     let item = list.item(cx, item_id, id!(status_label));
-                    item.label(ids!(label)).set_text(cx, "No rooms or spaces found.");
-                    item.view(ids!(loading_spinner)).apply_over(cx, live! { visible: false });
+                    item.label(cx, ids!(label)).set_text(cx, "No rooms or spaces found.");
+                    item.view(cx, ids!(loading_spinner)).apply_over(cx, live! { visible: false });
                     item
                 }
                 // Draw a regular entry
@@ -1036,13 +1050,24 @@ impl Widget for SpaceLobbyScreen {
                                     }
                                     show_buttons_view = inner.show_buttons_view;
                                 }
-                                item.view(ids!(buttons_view)).set_visible(cx, show_buttons_view);
+                                item.view(cx, ids!(buttons_view)).set_visible(cx, show_buttons_view);
                                 // Expand icon
                                 let is_expanded = self.expanded_spaces.contains(&info.id);
-                                let angle = if is_expanded { 180.0 } else { 90.0 };
-                                item.icon(ids!(expand_icon)).apply_over(cx, live! {
-                                    draw_icon: { rotation_angle: (angle) }
-                                });
+                                if is_expanded {
+                                    item.icon(cx, ids!(expand_icon)).apply_over(
+                                        cx,
+                                        live! {
+                                            draw_icon: { rotation_angle: 180.0 }
+                                        },
+                                    );
+                                } else {
+                                    item.icon(cx, ids!(expand_icon)).apply_over(
+                                        cx,
+                                        live! {
+                                            draw_icon: { rotation_angle: 90.0 }
+                                        },
+                                    );
+                                }
                                 item
                             } else {
                                 let item = list.item(cx, item_id, id!(room_entry));
@@ -1056,19 +1081,19 @@ impl Widget for SpaceLobbyScreen {
                                     }
                                     show_buttons_view = inner.show_buttons_view;
                                 }
-                                item.view(ids!(buttons_view)).set_visible(cx, show_buttons_view);
+                                item.view(cx, ids!(buttons_view)).set_visible(cx, show_buttons_view);
                                 item
                             };
 
-                            item.button(ids!(buttons_view.join_button)).set_visible(cx, show_join_button);
-                            item.button(ids!(buttons_view.leave_button)).set_visible(cx, show_leave_button);
-                            item.button(ids!(buttons_view.view_button)).set_visible(cx, show_view_button);
+                            item.button(cx, ids!(buttons_view.join_button)).set_visible(cx, show_join_button);
+                            item.button(cx, ids!(buttons_view.leave_button)).set_visible(cx, show_leave_button);
+                            item.button(cx, ids!(buttons_view.view_button)).set_visible(cx, show_view_button);
 
                             // Below, draw things that are common to child rooms and subspaces.
-                            item.label(ids!(content.name_label)).set_text(cx, &info.name);
+                            item.label(cx, ids!(content.name_label)).set_text(cx, &info.name);
 
                             // Display avatar from stored data, or fetch from cache, or show initials
-                            let avatar_ref = item.avatar(ids!(avatar));
+                            let avatar_ref = item.avatar(cx, ids!(avatar));
                             let first_char = utils::user_name_first_letter(&info.name);
                             let mut drew_avatar = false;
 
@@ -1103,7 +1128,7 @@ impl Widget for SpaceLobbyScreen {
                                 avatar_ref.show_text(cx, None, None, first_char.unwrap_or("#"));
                             }
 
-                            if let Some(mut lines) = item.widget(ids!(tree_lines)).borrow_mut::<TreeLines>() {
+                            if let Some(mut lines) = item.widget(cx, ids!(tree_lines)).borrow_mut::<TreeLines>() {
                                 lines.draw_bg.level = *level as f32;
                                 lines.draw_bg.is_last = if *is_last { 1.0 } else { 0.0 };
                                 lines.draw_bg.parent_mask = *parent_mask as f32;
@@ -1112,7 +1137,7 @@ impl Widget for SpaceLobbyScreen {
 
                             // Build the info label with join status, member count, and topic
                             // Note: Public/Private is intentionally not shown per-item to reduce clutter
-                            let info_label = item.label(ids!(content.info_label));
+                            let info_label = item.label(cx, ids!(content.info_label));
                             let mut info_parts = Vec::new();
 
                             // Add join status for rooms we haven't joined
@@ -1144,7 +1169,7 @@ impl Widget for SpaceLobbyScreen {
                                 }
                             }
 
-                            // Add topic if available (Label handles truncation via wrap: Ellipsis)
+                            // Add topic if available (Label handles truncation via flow: Flow.Right{wrap: true})
                             if let Some(topic) = &info.topic {
                                 info_parts.push(topic.to_string());
                             }
@@ -1157,7 +1182,7 @@ impl Widget for SpaceLobbyScreen {
                             // Draw loading indicator for subspace
                             let item = list.item(cx, item_id, id!(subspace_loading));
                             // Configure tree lines
-                            if let Some(mut lines) = item.widget(ids!(tree_lines)).borrow_mut::<TreeLines>() {
+                            if let Some(mut lines) = item.widget(cx, ids!(tree_lines)).borrow_mut::<TreeLines>() {
                                 lines.draw_bg.level = *level as f32;
                                 lines.draw_bg.is_last = 1.0; 
                                 lines.draw_bg.parent_mask = *parent_mask as f32;
@@ -1339,7 +1364,7 @@ impl SpaceLobbyScreen {
 
     pub fn set_displayed_space(&mut self, cx: &mut Cx, space_name_id: &RoomNameId) {
         let space_name = space_name_id.to_string();
-        let parent_name = self.view.label(ids!(header.parent_space_row.parent_name));
+        let parent_name = self.view.label(cx, ids!(header.parent_space_row.parent_name));
         parent_name.set_text(cx, &space_name);
 
         // If this space is already being displayed, then the only thing we may need to do
@@ -1368,7 +1393,7 @@ impl SpaceLobbyScreen {
 
         // Clear the main content until we receive the async space info responses.
         self.tree_entries.clear();
-        self.view.label(ids!(header.space_info_label)).set_text(cx, "");
+        self.view.label(cx, ids!(header.space_info_label)).set_text(cx, "");
         self.is_loading = true;
 
         // Restore UI state if we've viewed this space before, otherwise start fresh
@@ -1381,7 +1406,7 @@ impl SpaceLobbyScreen {
 
         // TODO: move avatar setting to `draw_walk()`
         // Set parent avatar
-        let avatar_ref = self.view.avatar(ids!(header.parent_space_row.parent_avatar));
+        let avatar_ref = self.view.avatar(cx, ids!(header.parent_space_row.parent_avatar));
         let first_char = utils::user_name_first_letter(&space_name);
         avatar_ref.show_text(cx, None, None, first_char.unwrap_or("#"));
 
diff --git a/src/home/spaces_bar.rs b/src/home/spaces_bar.rs
index 0e1d43943..ecb3f78cf 100644
--- a/src/home/spaces_bar.rs
+++ b/src/home/spaces_bar.rs
@@ -13,46 +13,43 @@ use matrix_sdk::{RoomDisplayName, RoomState};
 use ruma::{OwnedRoomAliasId, OwnedRoomId, room::JoinRuleSummary};
 
 use crate::{
-    home::navigation_tab_bar::{NavigationBarAction, SelectedTab}, room::{FetchedRoomAvatar, room_display_filter::{RoomDisplayFilter, RoomDisplayFilterBuilder, RoomFilterCriteria}}, shared::{avatar::AvatarWidgetRefExt, callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, room_filter_input_bar::RoomFilterAction}, utils::{self, RoomNameId}
+    home::navigation_tab_bar::{NavigationBarAction, SelectedTab}, room::{FetchedRoomAvatar, room_display_filter::{RoomDisplayFilter, RoomDisplayFilterBuilder, RoomFilterCriteria}}, shared::{avatar::AvatarWidgetRefExt, room_filter_input_bar::RoomFilterAction}, utils::{self, RoomNameId}
 };
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::avatar::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
     // The duration of the animation when showing/hiding the SpacesBar (in Mobile view mode only).
-    pub SPACES_BAR_ANIMATION_DURATION_SECS = 0.25
+    mod.widgets.SPACES_BAR_ANIMATION_DURATION_SECS = 0.25
 
     // An entry in the list of all spaces, which shown the Space's avatar and name.
-    SpacesBarEntry = {{SpacesBarEntry}}<RoundedView> {
+    mod.widgets.SpacesBarEntry = set_type_default() do #(SpacesBarEntry::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         width: (NAVIGATION_TAB_BAR_SIZE - 5),
         height: (NAVIGATION_TAB_BAR_SIZE - 5),
         flow: Down
         padding: 5,
         margin: 3,
-        align: {x: 0.5, y: 0.5}
-        cursor: Hand
+        align: Align{x: 0.5, y: 0.5}
+        cursor: MouseCursor.Hand
 
         show_bg: true
-        draw_bg: {
-            instance hover: 0.0
-            instance active: 0.0
+        draw_bg +: {
+            hover: instance(0.0)
+            active: instance(0.0)
 
-            color: #0000
-            uniform color_hover: (COLOR_NAVIGATION_TAB_BG_HOVER)
-            uniform color_active: (COLOR_NAVIGATION_TAB_BG_ACTIVE)
+            color: uniform(#0000)
+            color_hover: uniform((COLOR_NAVIGATION_TAB_BG_HOVER))
+            color_active: uniform((COLOR_NAVIGATION_TAB_BG_ACTIVE))
 
-            border_size: 0.0
-            border_color: #0000
-            uniform inset: vec4(0.0, 0.0, 0.0, 0.0)
-            border_radius: 4.0
+            border_size: uniform(0.0)
+            border_color: uniform(#0000)
+            inset: uniform(vec4(0.0))
+            border_radius: uniform(4.0)
 
-            fn get_color(self) -> vec4 {
+            get_color: fn() -> vec4 {
                 return mix(
                     mix(
                         self.color,
@@ -64,12 +61,8 @@ live_design! {
                 )
             }
 
-            fn get_border_color(self) -> vec4 {
-                return self.border_color
-            }
-
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                 sdf.box(
                     self.inset.x + self.border_size,
                     self.inset.y + self.border_size,
@@ -79,47 +72,47 @@ live_design! {
                 )
                 sdf.fill_keep(self.get_color())
                 if self.border_size > 0.0 {
-                    sdf.stroke(self.get_border_color(), self.border_size)
+                    sdf.stroke(self.border_color, self.border_size)
                 }
                 return sdf.result;
             }
         }
 
-        avatar = <Avatar> {
+        avatar := Avatar {
             width: 45, height: 45
             // If no avatar picture, use white text on a dark background.
-            text_view = {
-                draw_bg: {
-                    background_color: (COLOR_FG_DISABLED),
+            text_view +: {
+                draw_bg.color: (COLOR_FG_DISABLED),
+                text +: {
+                    draw_text +: {
+                        text_style: theme.font_regular { font_size: 16.0 },
+                        color: (COLOR_PRIMARY),
+                    }
                 }
-                text = { draw_text: {
-                    text_style: { font_size: 16.0 },
-                    color: (COLOR_PRIMARY),
-                } }
             }
         }
 
-        space_name = <Label> {
+        space_name := Label {
             width: Fill,
             // height: Fit
             height: 0,
-            flow: RightWrap, // do not wrap
+            flow: Flow.Right{wrap: true}, // do not wrap
             padding: 0,
-            align: {x: 0.5}
-            draw_text: {
-                instance active: 0.0
-                instance hover: 0.0
-                instance down: 0.0
+            align: Align{x: 0.5}
+            draw_text +: {
+                active: instance(0.0)
+                hover: instance(0.0)
+                down: instance(0.0)
 
                 color: (COLOR_NAVIGATION_TAB_FG)
-                uniform color_hover: (COLOR_NAVIGATION_TAB_FG_HOVER)
-                uniform color_active: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
+                color_hover: uniform((COLOR_NAVIGATION_TAB_FG_HOVER))
+                color_active: uniform((COLOR_NAVIGATION_TAB_FG_ACTIVE))
 
-                // text_style: <THEME_FONT_BOLD>{font_size: 9}
-                text_style: <REGULAR_TEXT>{font_size: 9}
-                wrap: Word,
+                // text_style: theme.font_bold {font_size: 9}
+                text_style: REGULAR_TEXT {font_size: 9}
+                flow: Flow.Right{wrap: true},
 
-                fn get_color(self) -> vec4 {
+                get_color: fn() -> vec4 {
                     return mix(
                         mix(
                             self.color,
@@ -133,107 +126,112 @@ live_design! {
             }
         }
 
-        animator: {
-            hover = {
-                default: off
-                off = {
+        animator: Animator {
+            hover: {
+                default: @off
+                off: AnimatorState{
                     from: {all: Forward {duration: 0.15}}
                     apply: {
                         draw_bg: {down: [{time: 0.0, value: 0.0}], hover: 0.0}
-                        space_name = { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 0.0} }
+                        space_name: { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 0.0} }
                     }
                 }
-                on = {
+                on: AnimatorState{
                     from: {all: Snap}
                     apply: {
                         draw_bg: {down: [{time: 0.0, value: 0.0}], hover: 1.0}
-                        space_name = { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 1.0} }
+                        space_name: { draw_text: {down: [{time: 0.0, value: 0.0}], hover: 1.0} }
                     }
                 }
-                down = {
+                down: AnimatorState{
                     from: {all: Forward {duration: 0.2}}
                     apply: {
                         draw_bg: {down: [{time: 0.0, value: 1.0}], hover: 1.0,}
-                        space_name = { draw_text: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
+                        space_name: { draw_text: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
+                    }
+                }
+            }
+            active: {
+                default: @off
+                off: AnimatorState{
+                    from: {all: Snap}
+                    apply: {
+                        draw_bg: {active: 0.0}
+                        space_name: { draw_text: {active: 0.0} }
+                    }
+                }
+                on: AnimatorState{
+                    from: {all: Snap}
+                    apply: {
+                        draw_bg: {active: 1.0}
+                        space_name: { draw_text: {active: 1.0} }
                     }
                 }
             }
         }
     }
 
-    StatusLabel = <View> {
+    mod.widgets.SpacesStatusLabel = View {
         width: (NAVIGATION_TAB_BAR_SIZE),
         height: (NAVIGATION_TAB_BAR_SIZE),
-        align: { x: 0.5, y: 0.5 }
-        margin: {top: 9, left: 2, bottom: 5}
+        align: Align{ x: 0.5, y: 0.5 }
+        margin: Inset{top: 9, left: 0, bottom: 5}
         // padding: 5.0,
 
-        label = <Label> {
+        label := Label {
             padding: 0
             margin: 0
             width: Fill,
             height: Fill
-            align: { x: 0.5, y: 0.5 }
-            draw_text: {
-                wrap: Word,
+            align: Align{ x: 0.5, y: 0.5 }
+            draw_text +: {
+                flow: Flow.Right{wrap: true},
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: <REGULAR_TEXT>{font_size: 9}
+                text_style: REGULAR_TEXT {font_size: 9}
             }
         }
     }
 
-    SpacesList = <PortalList> {
+    mod.widgets.SpacesList = PortalList {
         height: Fill,
         width: Fill,
-        flow: Down,
         spacing: 0.0
 
         auto_tail: false, 
         max_pull_down: 0.0,
-        scroll_bar: {  // hide the scroll bar
+        scroll_bar: ScrollBar {  // hide the scroll bar
             bar_size: 0.0,
             min_handle_size: 0.0
         }
 
-        SpacesBarEntry = <SpacesBarEntry> {}
-        StatusLabel = <StatusLabel> {}
-        BottomFiller = <View> {
+        spaces_bar_entry := mod.widgets.SpacesBarEntry {}
+        StatusLabel := mod.widgets.SpacesStatusLabel {}
+        BottomFiller := View {
             width: (NAVIGATION_TAB_BAR_SIZE)
             height: (NAVIGATION_TAB_BAR_SIZE)
         }
     }
 
-    pub SpacesBar = {{SpacesBar}}<AdaptiveView> {
-        Desktop = {
-            align: {x: 0.5, y: 0.5}
+    mod.widgets.SpacesBar = #(SpacesBar::register_widget(vm)) {
+        Desktop := View {
+            align: Align{x: 0.5, y: 0.5}
             padding: 0,
             width: (NAVIGATION_TAB_BAR_SIZE), 
             height: Fill
 
-            show_bg: false
-
-            <CachedWidget> {
-                spaces_list = <SpacesList> {
-                    // Note: this doesn't work properly, so this is re-overwritten
-                    // in the `SpacesBar::draw_walk()` function.
-                    flow: Down,
-                }
+            CachedWidget {
+                spaces_list := mod.widgets.SpacesList { }
             }
         }
 
-        Mobile = {
-            align: {x: 0.5, y: 0.5}
+        Mobile := View {
+            align: Align{x: 0.5, y: 0.5}
+            padding: 0,
             width: Fill,
             height: (NAVIGATION_TAB_BAR_SIZE)
 
-            show_bg: false
-
-            <CachedWidget> {
-                spaces_list = <SpacesList> {
-                    // Note: this doesn't work properly, so this is re-overwritten
-                    // in the `SpacesBar::draw_walk()` function.
-                    flow: Right,
-                }
+            CachedWidget {
+                spaces_list := mod.widgets.SpacesList { }
             }
         }
     }
@@ -241,18 +239,20 @@ live_design! {
 
 
 /// Actions emitted by and handled by the SpacesBar widget (and its children).
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum SpacesBarAction {
     /// The user primary-clicked/tapped a space entry in the SpacesBar.
     ButtonClicked { space_name_id: RoomNameId },
     /// The user secondary-clicked/long-pressed a space entry in the SpacesBar.
     ButtonSecondaryClicked { space_name_id: RoomNameId },
+    #[default]
     None,
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct SpacesBarEntry {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 
@@ -260,7 +260,7 @@ pub struct SpacesBarEntry {
 }
 
 impl Widget for SpacesBarEntry {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, _scope: &mut Scope) {
         if self.animator_handle_event(cx, event).must_redraw() {
             self.redraw(cx);
         }
@@ -269,8 +269,7 @@ impl Widget for SpacesBarEntry {
         let emit_hover_in_action = |this: &Self, cx: &mut Cx| {
             let is_desktop = cx.display_context.is_desktop();
             cx.widget_action(
-                this.widget_uid(),
-                &scope.path,
+                this.widget_uid(), 
                 TooltipAction::HoverIn {
                     widget_rect: area.rect(cx),
                     text: this.space_name_id.as_ref().map_or(
@@ -297,8 +296,7 @@ impl Widget for SpacesBarEntry {
             Hit::FingerHoverOut(_) => {
                 self.animator_play(cx, ids!(hover.off));
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     TooltipAction::HoverOut,
                 );
             }
@@ -307,8 +305,7 @@ impl Widget for SpacesBarEntry {
                 if fe.device.mouse_button().is_some_and(|b| b.is_secondary()) {
                     if let Some(space_name_id) = self.space_name_id.clone() {
                         cx.widget_action(
-                            self.widget_uid(),
-                            &scope.path,
+                            self.widget_uid(), 
                             SpacesBarAction::ButtonSecondaryClicked { space_name_id },
                         );
                     }
@@ -319,8 +316,7 @@ impl Widget for SpacesBarEntry {
                 emit_hover_in_action(self, cx);
                 if let Some(space_name_id) = self.space_name_id.clone() {
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         SpacesBarAction::ButtonSecondaryClicked { space_name_id },
                     );
                 }
@@ -329,8 +325,7 @@ impl Widget for SpacesBarEntry {
                 self.animator_play(cx, ids!(hover.on));
                 if let Some(space_name_id) = self.space_name_id.clone() {
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         SpacesBarAction::ButtonClicked { space_name_id },
                     );
                 }
@@ -350,11 +345,7 @@ impl Widget for SpacesBarEntry {
 impl SpacesBarEntry {
     fn set_metadata(&mut self, cx: &mut Cx, space_name_id: RoomNameId, is_selected: bool) {
         self.space_name_id = Some(space_name_id);
-        let active_val = is_selected as u8 as f64;
-        self.apply_over(cx, live!{
-            draw_bg: { active: (active_val) },
-            space_name = { draw_text: { active: (active_val) } }
-        });
+        self.animator_toggle(cx, is_selected, Animate::No, ids!(active.on), ids!(active.off));
     }
 }
 impl SpacesBarEntryRef {
@@ -467,7 +458,7 @@ pub fn enqueue_spaces_list_update(update: SpacesListUpdate) {
 ///
 /// * In the "desktop" (wide) layout, this is a vertical bar on the left.
 /// * In the "mobile" (narrow) layout, this is a horizontal bar on the bottom.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct SpacesBar {
     #[deref] view: AdaptiveView,
 
@@ -548,12 +539,12 @@ impl Widget for SpacesBar {
             // AdaptiveView + CachedWidget does not properly handle DSL-level style overrides,
             // so we must manually apply the different style choices here when drawing it.
             if cx.display_context.is_desktop() {
-                list.apply_over(cx, live! {
-                    flow: Down,
+                script_apply_eval!(cx, list, {
+                    flow: #(Flow::Down),
                 });
             } else {
-                list.apply_over(cx, live! {
-                    flow: Right,
+                script_apply_eval!(cx, list, {
+                    flow: #(Flow::right()),
                 });
             }
 
@@ -563,7 +554,7 @@ impl Widget for SpacesBar {
                 while let Some(portal_list_index) = list.next_visible_item(cx) {
                     let item = if portal_list_index == 0 {
                         let item = list.item(cx, portal_list_index, id!(StatusLabel));
-                        item.label(ids!(label)).set_text(
+                        item.label(cx, ids!(label)).set_text(
                             cx,
                             if self.is_filtered {
                                 "Found no\nmatching spaces."
@@ -585,11 +576,11 @@ impl Widget for SpacesBar {
                         .get(portal_list_index)
                         .and_then(|space_id| self.all_joined_spaces.get(space_id))
                     {
-                        let item = list.item(cx, portal_list_index, id!(SpacesBarEntry));
+                        let item = list.item(cx, portal_list_index, id!(spaces_bar_entry));
                         // Populate the space name and avatar (although this isn't visible by default).
                         let space_name = space.space_name_id.to_string();
-                        item.label(ids!(space_name)).set_text(cx, &space_name);
-                        let avatar_ref = item.avatar(ids!(avatar));
+                        item.label(cx, ids!(space_name)).set_text(cx, &space_name);
+                        let avatar_ref = item.avatar(cx, ids!(avatar));
                         match &space.space_avatar {
                             FetchedRoomAvatar::Text(text) => {
                                 avatar_ref.show_text(cx, None, None, text);
@@ -626,7 +617,7 @@ impl Widget for SpacesBar {
                             2..100 => format!("Found {len}\n{descriptor} spaces."),
                             100..  => format!("Found 99+\n{descriptor} spaces."),
                         };
-                        item.label(ids!(label)).set_text(cx, &text);
+                        item.label(cx, ids!(label)).set_text(cx, &text);
                         item
                     }
                     else {
@@ -780,7 +771,7 @@ impl SpacesBar {
 
                 SpacesListUpdate::ScrollToSpace(space_id) => {
                     if let Some(index) = self.displayed_spaces.iter().position(|s| s == &space_id) {
-                        let portal_list = self.view.portal_list(ids!(spaces_list));
+                        let portal_list = self.view.portal_list(cx, ids!(spaces_list));
                         let speed = 40.0;
                         // Scroll to just above the space to make it more visible.
                         portal_list.smooth_scroll_to(cx, index.saturating_sub(1), speed, Some(10));
@@ -796,7 +787,7 @@ impl SpacesBar {
 
     /// Updates the lists of displayed spaces based on the current search filter.
     fn update_displayed_spaces(&mut self, cx: &mut Cx, keywords: &str) {
-        let portal_list = self.view.portal_list(ids!(spaces_list));
+        let portal_list = self.view.portal_list(cx, ids!(spaces_list));
         if keywords.is_empty() {
             // Reset each of the displayed_* lists to show all rooms.
             self.is_filtered = false;
diff --git a/src/home/tombstone_footer.rs b/src/home/tombstone_footer.rs
index e7da3fc20..6406ea1f6 100644
--- a/src/home/tombstone_footer.rs
+++ b/src/home/tombstone_footer.rs
@@ -14,75 +14,73 @@ use crate::{app::AppStateAction, room::{BasicRoomDetails, FetchedRoomAvatar, Fet
 const DEFAULT_TOMBSTONE_REASON: &str = "This room has been replaced and is no longer active.";
 const DEFAULT_JOIN_BUTTON_TEXT: &str = "Go to the replacement room";
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
-    use crate::home::invite_screen::*;
-
-    pub TombstoneFooter = {{TombstoneFooter}}<ScrollYView> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.TombstoneFooter = set_type_default() do #(TombstoneFooter::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         visible: false,
         width: Fill,
-        height: Fit { max: Rel { base: Full, factor: 0.625 } }
+        height: Fit
         flow: Down,
-        align: {x: 0.5}
+        align: Align{x: 0.5}
         padding: 20,
         spacing: 8
 
         show_bg: true
-        draw_bg: {
-            color: (COLOR_SECONDARY)
-        }
+        draw_bg.color: (COLOR_SECONDARY)
 
-        replacement_reason = <Label> {
+        replacement_reason := Label {
             width: Fill, height: Fit,
-            flow: RightWrap,
-            align: {x: 0.5}
-            draw_text: {
+            flow: Flow.Right{wrap: true},
+            align: Align{x: 0.5}
+            draw_text +: {
                 color: (TYPING_NOTICE_TEXT_COLOR),
-                text_style: <REGULAR_TEXT>{font_size: 11}
-                wrap: Word,
+                text_style: REGULAR_TEXT {font_size: 11}
+                flow: Flow.Right{wrap: true},
             }
         }
 
-        join_successor_button = <RobrixIconButton> {
+        join_successor_button := RobrixIconButton {
             padding: 15,
-            draw_icon: {
-                svg_file: (ICON_JOIN_ROOM),
+            draw_icon +: {
+                svg: (ICON_JOIN_ROOM),
                 color: (COLOR_FG_ACCEPT_GREEN),
             }
-            icon_walk: {width: 17, height: 17, margin: {left: -2, right: -1} }
+            icon_walk: Walk{width: 17, height: 17, margin: Inset{left: -2, right: -1} }
 
-            draw_bg: {
-                border_color: (COLOR_FG_ACCEPT_GREEN),
-                color: #f0fff0 // light green
+            draw_bg +: {
+                border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                color: instance(#f0fff0) // light green
             }
-            draw_text: {
+            draw_text +: {
                 color: (COLOR_FG_ACCEPT_GREEN),
             }
         }
 
-        successor_room_avatar = <Avatar> {
+        successor_room_avatar := Avatar {
             width: 30, height: 30,
-            cursor: Default,
-            text_view = { text = { draw_text: {
-                text_style: <TITLE_TEXT>{ font_size: 13.0 }
-            }}}
+            cursor: MouseCursor.Default,
+            text_view +: {
+                text +: {
+                    draw_text +: {
+                        text_style: TITLE_TEXT { font_size: 13.0 }
+                    }
+                }
+            }
         }
 
-        successor_room_name = <Label> {
+        successor_room_name := Label {
             width: Fill, height: Fit,
-            flow: RightWrap,
-            align: {x: 0.5}
-            draw_text: {
-                text_style: <TITLE_TEXT>{ font_size: 12 }
+            flow: Flow.Right{wrap: true},
+            align: Align{x: 0.5}
+            draw_text +: {
+                text_style: TITLE_TEXT { font_size: 12 }
                 color: (COLOR_TEXT)
-                wrap: Word,
+                flow: Flow.Right{wrap: true},
             }
         }
     }
@@ -107,7 +105,7 @@ pub enum SuccessorRoomDetails {
 
 
 /// A view that shows information about a tombstoned room and its successor.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct TombstoneFooter {
     #[deref] view: View,
     /// The ID of the current tombstoned room.
@@ -119,7 +117,7 @@ pub struct TombstoneFooter {
 impl Widget for TombstoneFooter {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         if let Event::Actions(actions) = event {
-            if self.view.button(ids!(join_successor_button)).clicked(actions) {
+            if self.view.button(cx, ids!(join_successor_button)).clicked(actions) {
                 let Some(destination_room) = self.successor_info.clone() else {
                     error!("BUG: cannot navigate to replacement room: no successor room information.");
                     return;
@@ -146,10 +144,10 @@ impl TombstoneFooter {
         tombstoned_room_id: &OwnedRoomId,
         successor_room_details: &SuccessorRoomDetails,
     ) {
-        let replacement_reason = self.view.label(ids!(replacement_reason));
-        let join_successor_button = self.view.button(ids!(join_successor_button));
-        let successor_room_avatar = self.view.avatar(ids!(successor_room_avatar));
-        let successor_room_name = self.view.label(ids!(successor_room_name));
+        let replacement_reason = self.view.label(cx, ids!(replacement_reason));
+        let join_successor_button = self.view.button(cx, ids!(join_successor_button));
+        let successor_room_avatar = self.view.avatar(cx, ids!(successor_room_avatar));
+        let successor_room_name = self.view.label(cx, ids!(successor_room_name));
 
         log!("Showing TombstoneFooter for room {tombstoned_room_id}, Successor: {successor_room_details:?}");
         match successor_room_details {
diff --git a/src/home/welcome_screen.rs b/src/home/welcome_screen.rs
index 887b1cadb..14d9c995f 100644
--- a/src/home/welcome_screen.rs
+++ b/src/home/welcome_screen.rs
@@ -1,51 +1,46 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::html_or_plaintext::*;
 
-    WELCOME_TEXT_COLOR: #x4
+    mod.widgets.WELCOME_TEXT_COLOR = #x4
 
-    pub WelcomeScreen = <ScrollYView> {
+    mod.widgets.WelcomeScreen = ScrollYView {
         width: Fill, height: Fill
-        align: {x: 0.0, y: 0.5}
+        align: Align{x: 0.0, y: 0.5}
 
         show_bg: true,
-        draw_bg: {
-            color: (COLOR_PRIMARY),
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY)),
         }
 
-        welcome_message = <RoundedView> {
+        welcome_message := RoundedView {
             padding: 40.
             width: Fill, height: Fit
             flow: Down, spacing: 20
 
-            title = <Label> {
+            title := Label {
                 text: "Welcome to Robrix!",
-                draw_text: {
-                    color: (WELCOME_TEXT_COLOR),
-                    text_style: <THEME_FONT_BOLD> {
+                draw_text +: {
+                    color: (mod.widgets.WELCOME_TEXT_COLOR),
+                    text_style: theme.font_bold {
                         font_size: 22.0
                     }
                 }
             }
 
             // Using the HTML widget to taking advantage of embedding a link within text with proper vertical alignment
-            <MessageHtml> {
-                padding: {top: 12, left: 0.}
+            MessageHtml {
+                padding: Inset{top: 12, left: 0.}
                 font_size: 14.
-                font_color: (WELCOME_TEXT_COLOR)
-                draw_normal: {
-                    color: (WELCOME_TEXT_COLOR)
-                }
-                a = {
-                    padding: {left: 8., right: 8., top: 4., bottom: 5.},
-                    // draw_text: {
-                    //     text_style: <THEME_FONT_BOLD> {top_drop: 1.2, font_size: 11. },
+                font_color: (mod.widgets.WELCOME_TEXT_COLOR)
+                text_style_normal: theme.font_regular { font_size: 14.0 }
+                a: {
+                    padding: Inset{left: 8., right: 8., top: 4., bottom: 5.},
+                    // draw_text +: {
+                    //     text_style: theme.font_bold {top_drop: 1.2, font_size: 11. },
                     //     color: #f,
                     //     color_pressed: #f00,
                     //     color_hover: #0f0,
diff --git a/src/join_leave_room_modal.rs b/src/join_leave_room_modal.rs
index a50871a85..6cb340509 100644
--- a/src/join_leave_room_modal.rs
+++ b/src/join_leave_room_modal.rs
@@ -5,133 +5,131 @@
 use std::borrow::Cow;
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 use matrix_sdk::ruma::OwnedRoomId;
 use tokio::sync::mpsc::UnboundedSender;
 
 use crate::{home::invite_screen::{InviteDetails, JoinRoomResultAction, LeaveRoomResultAction}, room::BasicRoomDetails, shared::popup_list::{PopupKind, enqueue_popup_notification}, sliding_sync::{MatrixRequest, submit_async_request}, space_service_sync::{SpaceRequest, SpaceRoomListAction}, utils::{self, RoomNameId}};
-use crate::shared::styles::{COLOR_ACTIVE_PRIMARY, COLOR_PRIMARY, COLOR_FG_ACCEPT_GREEN, COLOR_BG_ACCEPT_GREEN};
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub JoinLeaveRoomModal = {{JoinLeaveRoomModal}} {
+    mod.widgets.JoinLeaveRoomModal = #(JoinLeaveRoomModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        <RoundedView> {
+        RoundedView {
             flow: Down
             width: 400
             height: Fit
-            padding: {top: 30, right: 40, bottom: 20, left: 40}
+            padding: Inset{top: 30, right: 40, bottom: 20, left: 40}
 
             show_bg: true
-            draw_bg: {
-                color: #fff
+            draw_bg +: {
+                color: instance(#fff)
                 border_radius: 4.0
             }
 
-            title_view = <View> {
+            title_view := View {
                 width: Fill,
                 height: Fit,
-                padding: {top: 0, bottom: 25}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 25}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                title := Label {
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
             }
 
-            body = <View> {
+            body := View {
                 width: Fill,
                 height: Fit,
                 flow: Down,
 
-                description = <Label> {
+                description := Label {
                     width: Fill
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {
                             font_size: 11.5,
                         },
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Right,
-                    padding: {top: 20, bottom: 20}
-                    align: {x: 1.0, y: 0.5}
+                    padding: Inset{top: 20, bottom: 20}
+                    align: Align{x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button = <RobrixIconButton> {
+                    cancel_button := RobrixIconButton {
                         width: 120,
-                        align: {x: 0.5, y: 0.5}
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon: {
-                            svg_file: (ICON_FORBIDDEN)
+                        draw_icon +: {
+                            svg: (ICON_FORBIDDEN)
                             color: (COLOR_FG_DANGER_RED),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
         
-                        draw_bg: {
-                            border_color: (COLOR_FG_DANGER_RED),
-                            color: (COLOR_BG_DANGER_RED)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_DANGER_RED)),
+                            color: instance((COLOR_BG_DANGER_RED))
                         }
                         text: "Cancel"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_DANGER_RED),
                         }
                     }
 
-                    accept_button = <RobrixIconButton> {
+                    accept_button := RobrixIconButton {
                         width: 120,
-                        align: {x: 0.5, y: 0.5}
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon: {
-                            svg_file: (ICON_CHECKMARK)
+                        draw_icon +: {
+                            svg: (ICON_CHECKMARK)
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                        draw_bg: {
-                            border_color: (COLOR_FG_ACCEPT_GREEN),
-                            color: (COLOR_BG_ACCEPT_GREEN)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                            color: instance((COLOR_BG_ACCEPT_GREEN))
                         }
                         text: "Yes"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
                     }
                 }
 
-                tip_view = <View> {
+                tip_view := View {
                     width: Fill,
                     height: Fit,
-                    align: {x: 0.5, y: 0.0}
+                    align: Align{x: 0.5, y: 0.0}
 
-                    tip = <Label> {
+                    tip := Label {
                         padding: 0,
                         margin: 0,
                         width: Fill,
                         height: Fit,
-                        flow: RightWrap,
-                        align: {x: 0.5}
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{
+                        flow: Flow.Right{wrap: true},
+                        align: Align{x: 0.5}
+                        draw_text +: {
+                            text_style: REGULAR_TEXT {
                                 font_size: 9,
                             },
                             color: #A,
-                            wrap: Word
+                            flow: Flow.Right{wrap: true}
                         }
                         text: "Tip: hold Shift when clicking a button to bypass this prompt."
                     }
@@ -141,7 +139,7 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct JoinLeaveRoomModal {
     #[deref] view: View,
     #[rust] kind: Option<JoinLeaveModalKind>,
@@ -245,8 +243,8 @@ impl Widget for JoinLeaveRoomModal {
 
 impl WidgetMatchEvent for JoinLeaveRoomModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let accept_button = self.view.button(ids!(accept_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
+        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
 
         let cancel_clicked = cancel_button.clicked(actions);
         if cancel_clicked ||
@@ -340,9 +338,9 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                     }
                 }
 
-                self.view.label(ids!(title)).set_text(cx, &title);
-                self.view.label(ids!(description)).set_text(cx, &description);
-                self.view.view(ids!(tip_view)).set_visible(cx, false);
+                self.view.label(cx, ids!(title)).set_text(cx, &title);
+                self.view.label(cx, ids!(description)).set_text(cx, &description);
+                self.view.view(cx, ids!(tip_view)).set_visible(cx, false);
                 accept_button.set_text(cx, accept_button_text);
                 accept_button.set_enabled(cx, false);
                 needs_redraw = true;
@@ -358,18 +356,18 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                         PopupKind::Success,
                         Some(3.0),
                     );
-                    self.view.label(ids!(title)).set_text(cx, "Joined room!");
-                    self.view.label(ids!(description)).set_text(cx, &format!(
+                    self.view.label(cx, ids!(title)).set_text(cx, "Joined room!");
+                    self.view.label(cx, ids!(description)).set_text(cx, &format!(
                         "Successfully joined \"{}\".",
                         kind.room_name(),
                     ));
                     new_final_success = Some(true);
                 }
                 Some(JoinRoomResultAction::Failed { room_id, error }) if room_id == kind.room_id() => {
-                    self.view.label(ids!(title)).set_text(cx, "Error joining room!");
+                    self.view.label(cx, ids!(title)).set_text(cx, "Error joining room!");
                     let was_invite = matches!(kind, JoinLeaveModalKind::AcceptInvite(_) | JoinLeaveModalKind::RejectInvite(_));
                     let msg = utils::stringify_join_leave_error(error, kind.room_name(), true, was_invite);
-                    self.view.label(ids!(description)).set_text(cx, &msg);
+                    self.view.label(cx, ids!(description)).set_text(cx, &msg);
                     enqueue_popup_notification(
                         msg,
                         PopupKind::Error,
@@ -400,8 +398,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                         );
                         popup_msg = "Successfully left room.".into();
                     }
-                    self.view.label(ids!(title)).set_text(cx, title);
-                    self.view.label(ids!(description)).set_text(cx, &description);
+                    self.view.label(cx, ids!(title)).set_text(cx, title);
+                    self.view.label(cx, ids!(description)).set_text(cx, &description);
                     enqueue_popup_notification(popup_msg, PopupKind::Success, Some(5.0));
                     new_final_success = Some(true);
                 }
@@ -419,8 +417,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                         popup_msg = "Failed to leave room.".into();
                     }
 
-                    self.view.label(ids!(title)).set_text(cx, title);
-                    self.view.label(ids!(description)).set_text(cx, &description);
+                    self.view.label(cx, ids!(title)).set_text(cx, title);
+                    self.view.label(cx, ids!(description)).set_text(cx, &description);
                     enqueue_popup_notification(popup_msg, PopupKind::Error, None);
                     new_final_success = Some(false);
                 }
@@ -443,8 +441,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                             new_final_success = Some(false);
                         }
                     }
-                    self.view.label(ids!(title)).set_text(cx, title);
-                    self.view.label(ids!(description)).set_text(cx, &description);
+                    self.view.label(cx, ids!(title)).set_text(cx, title);
+                    self.view.label(cx, ids!(description)).set_text(cx, &description);
                 }
             }
         }
@@ -456,8 +454,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                 enabled: true
                 text: "Okay"
                 draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY),
-                    border_color: (COLOR_ACTIVE_PRIMARY)
+                    color: instance((COLOR_ACTIVE_PRIMARY)),
+                    border_color: instance((COLOR_ACTIVE_PRIMARY))
                 }
                 draw_text: {
                     color: (COLOR_PRIMARY)
@@ -548,24 +546,24 @@ impl JoinLeaveRoomModal {
             }
         }
 
-        self.view.label(ids!(title)).set_text(cx, title);
-        self.view.label(ids!(description)).set_text(cx, &description);
+        self.view.label(cx, ids!(title)).set_text(cx, title);
+        self.view.label(cx, ids!(description)).set_text(cx, &description);
         if show_tip {
-            self.view.view(ids!(tip_view)).set_visible(cx, true);
-            self.view.label(ids!(tip)).set_text(cx, &format!(
+            self.view.view(cx, ids!(tip_view)).set_visible(cx, true);
+            self.view.label(cx, ids!(tip)).set_text(cx, &format!(
                 "Tip: hold Shift when clicking the \"{tip_button}\" button to bypass this prompt.",
             ));
         } else {
-            self.view.view(ids!(tip_view)).set_visible(cx, false);
+            self.view.view(cx, ids!(tip_view)).set_visible(cx, false);
         }
 
-        let accept_button = self.button(ids!(accept_button));
-        let cancel_button = self.button(ids!(cancel_button));
+        let accept_button = self.button(cx, ids!(accept_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
         accept_button.set_text(cx, "Yes");
         accept_button.apply_over(cx, live!{
             draw_bg: {
-                border_color: (COLOR_FG_ACCEPT_GREEN),
-                color: (COLOR_BG_ACCEPT_GREEN)
+                border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                color: instance((COLOR_BG_ACCEPT_GREEN))
             }
             draw_text: {
                 color: (COLOR_FG_ACCEPT_GREEN)
diff --git a/src/lib.rs b/src/lib.rs
index 447520c55..e81bf7b1c 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -2,10 +2,90 @@
 
 use std::{path::Path, sync::OnceLock};
 
+use makepad_widgets::ScriptNew;
 use robius_directories::ProjectDirs;
 
 pub use makepad_widgets;
 
+#[macro_export]
+macro_rules! live {
+    ($($tt:tt)*) => {
+        makepad_widgets::script! { $($tt)* }
+    };
+}
+
+pub type LivePtr = makepad_widgets::ScriptValue;
+
+pub trait ApplyOverCompat {
+    fn apply_over(self, cx: &mut makepad_widgets::Cx, script: makepad_widgets::ScriptMod);
+}
+
+impl<T> ApplyOverCompat for &mut T
+where
+    T: makepad_widgets::ScriptApply,
+{
+    fn apply_over(self, cx: &mut makepad_widgets::Cx, script: makepad_widgets::ScriptMod) {
+        cx.with_vm(|vm| self.script_apply_eval(vm, script));
+    }
+}
+
+impl<T> ApplyOverCompat for &T
+where
+    T: makepad_widgets::ScriptApply + Clone,
+{
+    fn apply_over(self, cx: &mut makepad_widgets::Cx, script: makepad_widgets::ScriptMod) {
+        let mut target = self.clone();
+        cx.with_vm(|vm| target.script_apply_eval(vm, script));
+    }
+}
+
+pub trait AnimatorCompat {
+    fn animator_in_state(
+        &self,
+        cx: &makepad_widgets::Cx,
+        check_state_pair: &[makepad_widgets::LiveId; 2],
+    ) -> bool;
+}
+
+impl AnimatorCompat for makepad_widgets::Animator {
+    fn animator_in_state(
+        &self,
+        cx: &makepad_widgets::Cx,
+        check_state_pair: &[makepad_widgets::LiveId; 2],
+    ) -> bool {
+        self.in_state(cx, check_state_pair)
+    }
+}
+
+pub trait AnimatorActionCompat {
+    fn is_animating(&self) -> bool;
+}
+
+impl AnimatorActionCompat for makepad_widgets::AnimatorAction {
+    fn is_animating(&self) -> bool {
+        matches!(self, makepad_widgets::AnimatorAction::Animating { .. })
+    }
+}
+
+pub fn widget_ref_from_live_ptr(
+    cx: &mut makepad_widgets::Cx,
+    ptr: Option<LivePtr>,
+) -> makepad_widgets::WidgetRef {
+    ptr.map_or_else(makepad_widgets::WidgetRef::empty, |value| {
+        cx.with_vm(|vm| makepad_widgets::WidgetRef::script_from_value(vm, value))
+    })
+}
+
+pub fn view_from_live_ptr(
+    cx: &mut makepad_widgets::Cx,
+    ptr: Option<LivePtr>,
+) -> makepad_widgets::View {
+    cx.with_vm(|vm| match ptr {
+        Some(value) => makepad_widgets::View::script_from_value(vm, value),
+        None => makepad_widgets::View::script_new(vm),
+    })
+}
+
 /// The top-level main application module.
 pub mod app;
 /// Function for loading and saving persistent application/session state.
@@ -51,6 +131,9 @@ pub mod utils;
 pub mod temp_storage;
 pub mod location;
 
+#[cfg(test)]
+mod script_parse_smoke;
+
 pub const APP_QUALIFIER: &str = "org";
 pub const APP_ORGANIZATION: &str = "robius";
 pub const APP_NAME: &str = "robrix";
diff --git a/src/login/login_screen.rs b/src/login/login_screen.rs
index f63a1d4d0..5a505b410 100644
--- a/src/login/login_screen.rs
+++ b/src/login/login_screen.rs
@@ -7,39 +7,33 @@ use crate::sliding_sync::{submit_async_request, LoginByPassword, LoginRequest, M
 
 use super::login_status_modal::{LoginStatusModalAction, LoginStatusModalWidgetExt};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::*;
-    use crate::login::login_status_modal::*;
 
-    IMG_APP_LOGO = dep("crate://self/resources/robrix_logo_alpha.png")
-    ICON_SEARCH = dep("crate://self/resources/icons/search.svg")
+    mod.widgets.IMG_APP_LOGO = crate_resource("self://resources/robrix_logo_alpha.png")
 
-    SsoButton = <RoundedView> {
+    mod.widgets.SsoButton = RoundedView {
         width: Fit,
         height: Fit,
-        cursor: Hand,
+        cursor: MouseCursor.Hand,
         visible: true,
         padding: 10,
-        margin: { left: 16.6, right: 16.6, top: 10, bottom: 10}
-        draw_bg: {
-            border_size: 0.5,
-            border_color: (#6c6c6c),
+        margin: Inset{ left: 16.6, right: 16.6, top: 10, bottom: 10}
+        draw_bg +: {
+            border_size: 0.5
+            border_color: #6c6c6c
             color: (COLOR_PRIMARY)
         }
     }
 
-    SsoImage = <Image> {
+    mod.widgets.SsoImage = Image {
         width: 30, height: 30,
-        draw_bg:{
-            uniform mask: 0.0
-            fn pixel(self) -> vec4 {
-                let color = sample2d(self.image, self.pos).xyzw;
+        draw_bg +: {
+            mask: uniform(0.0)
+            pixel: fn() {
+                let color = self.get_color();
                 let gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
                 let grayed = mix(color, vec4(gray, gray, gray, color.a), self.mask);
                 return grayed;
@@ -48,23 +42,23 @@ live_design! {
     }
 
 
-    pub LoginScreen = {{LoginScreen}} {
+    mod.widgets.LoginScreen = set_type_default() do #(LoginScreen::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill, height: Fill,
-        align: {x: 0.5, y: 0.5}
+        align: Align{x: 0.5, y: 0.5}
         show_bg: true,
-        draw_bg: {
-            color: #FFF
-        }
+        draw_bg.color: (COLOR_SECONDARY)
+        // draw_bg.color: (COLOR_PRIMARY) // TODO: once Makepad supports `Fill {max: 375}`, change this back to COLOR_PRIMARY
 
-        <ScrollYView> {
+        ScrollYView {
             width: Fill, height: Fill,
             // Note: *do NOT* vertically center this, it will break scrolling.
-            align: {x: 0.5}
+            align: Align{x: 0.5}
             show_bg: true,
-            draw_bg: {
-                color: (COLOR_SECONDARY)
-                // color: (COLOR_PRIMARY) // TODO: once Makepad supports `Fill {max: 375}`, change this back to COLOR_PRIMARY
-            }
+            draw_bg.color: (COLOR_SECONDARY)
+            // draw_bg.color: (COLOR_PRIMARY) // TODO: once Makepad supports `Fill {max: 375}`, change this back to COLOR_PRIMARY
+   
             // allow the view to be scrollable but hide the actual scroll bar
             scroll_bars: {
                 scroll_bar_y: {
@@ -72,54 +66,54 @@ live_design! {
                     min_handle_size: 0.0
                 }
             }
-        
-            <RoundedView> {
-                margin: {top: 40, bottom: 40}
+
+            RoundedView {
+                margin: Inset{top: 40, bottom: 40}
                 width: Fill // TODO: once Makepad supports it, use `Fill {max: 375}`
                 height: Fit
-                align: {x: 0.5, y: 0.5}
+                align: Align{x: 0.5, y: 0.5}
                 flow: Overlay,
 
                 show_bg: true,
-                draw_bg: {
+                draw_bg +: {
                     color: (COLOR_SECONDARY)
                     border_radius: 6.0
                 }
 
-                <View> {
+                View {
                     width: Fill // TODO: once Makepad supports it, use `Fill {max: 375}`
                     height: Fit
                     flow: Down
-                    align: {x: 0.5, y: 0.5}
-                    padding: {top: 30, bottom: 30}
-                    margin: {top: 40, bottom: 40}
+                    align: Align{x: 0.5, y: 0.5}
+                    padding: Inset{top: 30, bottom: 30}
+                    margin: Inset{top: 40, bottom: 40}
                     spacing: 15.0
 
-                    logo_image = <Image> {
-                        fit: Smallest,
+                    logo_image := Image {
+                        fit: ImageFit.Smallest,
                         width: 80
-                        source: (IMG_APP_LOGO),
+                        src: (mod.widgets.IMG_APP_LOGO),
                     }
 
-                    title = <Label> {
+                    title := Label {
                         width: Fit, height: Fit
-                        margin: { bottom: 5 }
+                        margin: Inset{ bottom: 5 }
                         padding: 0,
-                        draw_text: {
+                        draw_text +: {
                             color: (COLOR_TEXT)
-                            text_style: <TITLE_TEXT>{font_size: 16.0}
+                            text_style: TITLE_TEXT {font_size: 16.0}
                         }
                         text: "Login to Robrix"
                     }
 
-                    user_id_input = <SimpleTextInput> {
+                    user_id_input := SimpleTextInput {
                         width: 275, height: Fit
                         flow: Right, // do not wrap
                         padding: 10,
                         empty_text: "User ID"
                     }
 
-                    password_input = <SimpleTextInput> {
+                    password_input := SimpleTextInput {
                         width: 275, height: Fit
                         flow: Right, // do not wrap
                         padding: 10,
@@ -127,154 +121,150 @@ live_design! {
                         is_password: true,
                     }
 
-                    <View> {
+                    View {
                         width: 275, height: Fit,
                         flow: Down,
 
-                        homeserver_input = <SimpleTextInput> {
+                        homeserver_input := SimpleTextInput {
                             width: 275, height: Fit,
                             flow: Right, // do not wrap
-                            padding: {top: 5, bottom: 5, left: 10, right: 10}
+                            padding: Inset{top: 5, bottom: 5, left: 10, right: 10}
                             empty_text: "matrix.org"
-                            draw_text: {
-                                text_style: <TITLE_TEXT>{font_size: 10.0}
+                            draw_text +: {
+                                text_style: TITLE_TEXT {font_size: 10.0}
                             }
                         }
 
-                        <View> {
+                        View {
                             width: 275,
                             height: Fit,
                             flow: Right,
-                            padding: {top: 3, left: 2, right: 2}
+                            padding: Inset{top: 3, left: 2, right: 2}
                             spacing: 0.0,
-                            align: {x: 0.5, y: 0.5} // center horizontally and vertically
+                            align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
 
-                            left_line = <LineH> {
-                                draw_bg: { color: #C8C8C8 }
+                            left_line := LineH {
+                                draw_bg.color: #C8C8C8
                             }
 
-                            <Label> {
+                            Label {
                                 width: Fit, height: Fit
                                 padding: 0
-                                draw_text: {
+                                draw_text +: {
                                     color: #8C8C8C
-                                    text_style: <REGULAR_TEXT>{font_size: 9}
+                                    text_style: REGULAR_TEXT {font_size: 9}
                                 }
                                 text: "Homeserver URL (optional)"
                             }
 
-                            right_line = <LineH> {
-                                draw_bg: { color: #C8C8C8 }
+                            right_line := LineH {
+                                draw_bg.color: #C8C8C8
                             }
                         }
                     }
                     
 
-                    login_button = <RobrixIconButton> {
+                    login_button := RobrixIconButton {
                         width: 275,
                         height: 40
                         padding: 10
-                        margin: {top: 5, bottom: 10}
-                        align: {x: 0.5, y: 0.5}
-                        draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY)
-                        }
-                        draw_text: {
+                        margin: Inset{top: 5, bottom: 10}
+                        align: Align{x: 0.5, y: 0.5}
+                        draw_bg.color: (COLOR_ACTIVE_PRIMARY)
+                        draw_text +: {
                             color: (COLOR_PRIMARY)
-                            text_style: <REGULAR_TEXT> {}
+                            text_style: REGULAR_TEXT {}
                         }
                         text: "Login"
                     }
 
-                    left_line = <LineH> {
+                    left_line := LineH {
                         width: 275
-                        margin: {bottom: -5}
-                        draw_bg: { color: #C8C8C8 }
+                        margin: Inset{bottom: -5}
+                        draw_bg.color: #C8C8C8
                     }
-                    <Label> {
+                    Label {
                         width: Fit, height: Fit
                         padding: 0,
-                        draw_text: {
+                        draw_text +: {
                             color: (COLOR_TEXT)
-                            text_style: <TITLE_TEXT>{font_size: 11.0}
+                            text_style: TITLE_TEXT {font_size: 11.0}
                         }
                         text: "Or, login with an SSO provider:"
                     }
 
-                    sso_view = <View> {
+                    sso_view := View {
                         width: 275, height: Fit,
-                        margin: {left: 30, right: 5} // make the inner view 240 pixels wide
-                        flow: RightWrap,
-                        apple_button = <SsoButton> {
-                            image = <SsoImage> {
-                                source: dep("crate://self/resources/img/apple.png")
+                        margin: Inset{left: 30, right: 5} // make the inner view 240 pixels wide
+                        flow: Flow.Right{wrap: true},
+                        apple_button := mod.widgets.SsoButton {
+                            image := mod.widgets.SsoImage {
+                                src: crate_resource("self://resources/img/apple.png")
                             }
                         }
-                        facebook_button = <SsoButton> {
-                            image = <SsoImage> {
-                                source: dep("crate://self/resources/img/facebook.png")
+                        facebook_button := mod.widgets.SsoButton {
+                            image := mod.widgets.SsoImage {
+                                src: crate_resource("self://resources/img/facebook.png")
                             }
                         }
-                        github_button = <SsoButton> {
-                            image = <SsoImage> {
-                                source: dep("crate://self/resources/img/github.png")
+                        github_button := mod.widgets.SsoButton {
+                            image := mod.widgets.SsoImage {
+                                src: crate_resource("self://resources/img/github.png")
                             }
                         }
-                        gitlab_button = <SsoButton> {
-                            image = <SsoImage> {
-                                source: dep("crate://self/resources/img/gitlab.png")
+                        gitlab_button := mod.widgets.SsoButton {
+                            image := mod.widgets.SsoImage {
+                                src: crate_resource("self://resources/img/gitlab.png")
                             }
                         }
-                        google_button = <SsoButton> {
-                            image = <SsoImage> {
-                                source: dep("crate://self/resources/img/google.png")
+                        google_button := mod.widgets.SsoButton {
+                            image := mod.widgets.SsoImage {
+                                src: crate_resource("self://resources/img/google.png")
                             }
                         }
-                        twitter_button = <SsoButton> {
-                            image = <SsoImage> {
-                                source: dep("crate://self/resources/img/x.png")
+                        twitter_button := mod.widgets.SsoButton {
+                            image := mod.widgets.SsoImage {
+                                src: crate_resource("self://resources/img/x.png")
                             }
                         }
                     }
 
-                    <View> {
+                    View {
                         width: 275,
                         height: Fit,
                         flow: Right,
                         // padding: 3,
                         spacing: 0.0,
-                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
 
-                        left_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        left_line := LineH {
+                            draw_bg.color: #C8C8C8
                         }
 
-                        <Label> {
+                        Label {
                             width: Fit, height: Fit
-                            padding: {left: 1, right: 1, top: 0, bottom: 0}
-                            draw_text: {
+                            padding: Inset{left: 1, right: 1, top: 0, bottom: 0}
+                            draw_text +: {
                                 color: #x6c6c6c
-                                text_style: <REGULAR_TEXT>{}
+                                text_style: REGULAR_TEXT {}
                             }
                             text: "Don't have an account?"
                         }
 
-                        right_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        right_line := LineH {
+                            draw_bg.color: #C8C8C8
                         }
                     }
                     
-                    signup_button = <RobrixIconButton> {
+                    signup_button := RobrixIconButton {
                         width: Fit, height: Fit
-                        padding: {left: 15, right: 15, top: 10, bottom: 10}
-                        margin: {bottom: 5}
-                        align: {x: 0.5, y: 0.5}
-                        draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY)
-                        }
-                        draw_text: {
+                        padding: Inset{left: 15, right: 15, top: 10, bottom: 10}
+                        margin: Inset{bottom: 5}
+                        align: Align{x: 0.5, y: 0.5}
+                        draw_bg.color: (COLOR_ACTIVE_PRIMARY)
+                        draw_text +: {
                             color: (COLOR_PRIMARY)
-                            text_style: <REGULAR_TEXT> {}
+                            text_style: REGULAR_TEXT {}
                         }
 
                         text: "Sign up here"
@@ -283,12 +273,12 @@ live_design! {
 
                 // The modal that pops up to display login status messages,
                 // such as when the user is logging in or when there is an error.
-                login_status_modal = <Modal> {
+                login_status_modal := Modal {
                     // width: Fit, height: Fit,
-                    // align: {x: 0.5, y: 0.5},
+                    // align: Align{x: 0.5, y: 0.5},
                     can_dismiss: false,
-                    content: {
-                        login_status_modal_inner = <LoginStatusModal> {}
+                    content +: {
+                        login_status_modal_inner := mod.widgets.LoginStatusModal {}
                     }
                 }
             }
@@ -298,8 +288,9 @@ live_design! {
 
 static MATRIX_SIGN_UP_URL: &str = "https://matrix.org/docs/chat_basics/matrix-for-im/#creating-a-matrix-account";
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct LoginScreen {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     /// Boolean to indicate if the SSO login process is still in flight
     #[rust] sso_pending: bool,
@@ -321,14 +312,14 @@ impl Widget for LoginScreen {
 
 impl MatchEvent for LoginScreen {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let login_button = self.view.button(ids!(login_button));
-        let signup_button = self.view.button(ids!(signup_button));
-        let user_id_input = self.view.text_input(ids!(user_id_input));
-        let password_input = self.view.text_input(ids!(password_input));
-        let homeserver_input = self.view.text_input(ids!(homeserver_input));
+        let login_button = self.view.button(cx, ids!(login_button));
+        let signup_button = self.view.button(cx, ids!(signup_button));
+        let user_id_input = self.view.text_input(cx, ids!(user_id_input));
+        let password_input = self.view.text_input(cx, ids!(password_input));
+        let homeserver_input = self.view.text_input(cx, ids!(homeserver_input));
 
-        let login_status_modal = self.view.modal(ids!(login_status_modal));
-        let login_status_modal_inner = self.view.login_status_modal(ids!(login_status_modal_inner));
+        let login_status_modal = self.view.modal(cx, ids!(login_status_modal));
+        let login_status_modal_inner = self.view.login_status_modal(cx, ids!(login_status_modal_inner));
 
         if signup_button.clicked(actions) {
             log!("Opening URL \"{}\"", MATRIX_SIGN_UP_URL);
@@ -346,15 +337,15 @@ impl MatchEvent for LoginScreen {
             if user_id.is_empty() {
                 login_status_modal_inner.set_title(cx, "Missing User ID");
                 login_status_modal_inner.set_status(cx, "Please enter a valid User ID.");
-                login_status_modal_inner.button_ref().set_text(cx, "Okay");
+                login_status_modal_inner.button_ref(cx).set_text(cx, "Okay");
             } else if password.is_empty() {
                 login_status_modal_inner.set_title(cx, "Missing Password");
                 login_status_modal_inner.set_status(cx, "Please enter a valid password.");
-                login_status_modal_inner.button_ref().set_text(cx, "Okay");
+                login_status_modal_inner.button_ref(cx).set_text(cx, "Okay");
             } else {
                 login_status_modal_inner.set_title(cx, "Logging in...");
                 login_status_modal_inner.set_status(cx, "Waiting for a login response...");
-                login_status_modal_inner.button_ref().set_text(cx, "Cancel");
+                login_status_modal_inner.button_ref(cx).set_text(cx, "Cancel");
                 submit_async_request(MatrixRequest::Login(LoginRequest::LoginByPassword(LoginByPassword {
                     user_id,
                     password,
@@ -390,7 +381,7 @@ impl MatchEvent for LoginScreen {
                         cx,
                         &format!("Auto-logging in as user {user_id}...")
                     );
-                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    let login_status_modal_button = login_status_modal_inner.button_ref(cx);
                     login_status_modal_button.set_text(cx, "Cancel");
                     login_status_modal_button.set_enabled(cx, false); // Login cancel not yet supported
                     login_status_modal.open(cx);
@@ -398,7 +389,7 @@ impl MatchEvent for LoginScreen {
                 Some(LoginAction::Status { title, status }) => {
                     login_status_modal_inner.set_title(cx, title);
                     login_status_modal_inner.set_status(cx, status);
-                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    let login_status_modal_button = login_status_modal_inner.button_ref(cx);
                     login_status_modal_button.set_text(cx, "Cancel");
                     login_status_modal_button.set_enabled(cx, true);
                     login_status_modal.open(cx);
@@ -416,26 +407,20 @@ impl MatchEvent for LoginScreen {
                 Some(LoginAction::LoginFailure(error)) => {
                     login_status_modal_inner.set_title(cx, "Login Failed.");
                     login_status_modal_inner.set_status(cx, error);
-                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    let login_status_modal_button = login_status_modal_inner.button_ref(cx);
                     login_status_modal_button.set_text(cx, "Okay");
                     login_status_modal_button.set_enabled(cx, true);
                     login_status_modal.open(cx);
                     self.redraw(cx);
                 }
                 Some(LoginAction::SsoPending(pending)) => {
-                    for view_ref in self.view_set(button_set).iter() {
-                        let Some(mut view_mut) = view_ref.borrow_mut() else { continue };
-                        if *pending {
-                            view_mut.apply_over(cx, live! {
-                                cursor: NotAllowed,
-                                image = { draw_bg: { mask: 1.0 } }
-                            });
-                        } else {
-                            view_mut.apply_over(cx, live! {
-                                cursor: Hand,
-                                image = { draw_bg: { mask: 0.0 } }
-                            });
-                        }
+                    let mask = if *pending { 1.0 } else { 0.0 };
+                    for view_ref in self.view_set(cx, button_set).iter() {
+                        let Some(view_mut) = view_ref.borrow_mut() else { continue };
+                        let mut image = view_mut.image(cx, ids!(image));
+                        script_apply_eval!(cx, image, {
+                            draw_bg.mask: #(mask)
+                        });
                     }
                     self.sso_pending = *pending;
                     self.redraw(cx);
@@ -449,7 +434,7 @@ impl MatchEvent for LoginScreen {
 
         // If the Login SSO screen's "cancel" button was clicked, send a http request to gracefully shutdown the SSO server
         if let Some(sso_redirect_url) = &self.sso_redirect_url {
-            let login_status_modal_button = login_status_modal_inner.button_ref();
+            let login_status_modal_button = login_status_modal_inner.button_ref(cx);
             if login_status_modal_button.clicked(actions) {
                 let request_id = id!(SSO_CANCEL_BUTTON);
                 let request = HttpRequest::new(format!("{}/?login_token=",sso_redirect_url), HttpMethod::GET);
@@ -459,7 +444,7 @@ impl MatchEvent for LoginScreen {
         }
 
         // Handle any of the SSO login buttons being clicked
-        for (view_ref, brand) in self.view_set(button_set).iter().zip(&provider_brands) {
+        for (view_ref, brand) in self.view_set(cx, button_set).iter().zip(&provider_brands) {
             if view_ref.finger_up(actions).is_some() && !self.sso_pending {
                 submit_async_request(MatrixRequest::SpawnSSOServer{
                     identity_provider_id: format!("oidc-{}",brand),
@@ -473,7 +458,7 @@ impl MatchEvent for LoginScreen {
 }
 
 /// Actions sent to or from the login screen.
-#[derive(Clone, DefaultNone, Debug)]
+#[derive(Clone, Default, Debug)]
 pub enum LoginAction {
     /// A positive response from the backend Matrix task to the login screen.
     LoginSuccess,
@@ -503,5 +488,6 @@ pub enum LoginAction {
     /// When an SSO-based login is pendng, pressing the cancel button will send
     /// an HTTP request to this SSO server URL to gracefully shut it down.
     SsoSetRedirectUrl(Url),
+    #[default]
     None,
 }
diff --git a/src/login/login_status_modal.rs b/src/login/login_status_modal.rs
index 0419b2bd6..ee57ac314 100644
--- a/src/login/login_status_modal.rs
+++ b/src/login/login_status_modal.rs
@@ -1,79 +1,73 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
     // A modal dialog that displays the status of a login attempt.
-    pub LoginStatusModal = {{LoginStatusModal}} {
+    mod.widgets.LoginStatusModal = #(LoginStatusModal::register_widget(vm)) {
         width: Fit,
         height: Fit
-        align: {x: 0.5}
+        align: Align{x: 0.5}
 
-        <RoundedView> {
-            // Halfway between the login screen background (320 px wide)
-            // and the login screen's buttons/content (250 px wide).
-            width: ((320+250)/2),
+        RoundedView {
+            width: 400
             height: Fit,
             flow: Down,
-            align: {x: 0.5}
+            align: Align{x: 0.5}
             padding: 25,
             spacing: 10,
 
             show_bg: true
-            draw_bg: {
+            draw_bg +: {
                 color: #CCC
-                border_radius: 3.0
+                border_radius: 4.0
             }
 
-            <View> {
+            View {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: {top: 0, bottom: 10}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 10}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
+                title := Label {
                     text: "Login Status"
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
                     }
                 }
             }
 
-            status = <Label> {
+            status := Label {
                 width: Fill
-                margin: {top: 5, bottom: 5}
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{
+                margin: Inset{top: 5, bottom: 5}
+                draw_text +: {
+                    text_style: REGULAR_TEXT {
                         font_size: 11.5,
                     },
                     color: #000
-                    wrap: Word
+                    flow: Flow.Right{wrap: true}
                 }
             }
 
-            <View> {
+            View {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                align: {x: 1.0}
-                margin: {top: 10}
+                align: Align{x: 1.0}
+                margin: Inset{top: 10}
 
-                button = <RobrixIconButton> {
-                    align: {x: 0.5, y: 0.5}
+                button := RobrixIconButton {
+                    align: Align{x: 0.5, y: 0.5}
                     width: Fit, height: Fit
                     padding: 12
-                    draw_bg: {
-                        color: (COLOR_ACTIVE_PRIMARY)
-                    }
-                    draw_text: {
+                    draw_bg.color: (COLOR_ACTIVE_PRIMARY)
+                    draw_text +: {
                         color: (COLOR_PRIMARY)
-                        text_style: <REGULAR_TEXT> {}
+                        text_style: REGULAR_TEXT {}
                     }
                     text: "Cancel"
                 }
@@ -83,13 +77,14 @@ live_design! {
 }
 
 /// A modal dialog that displays the status of a login attempt.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct LoginStatusModal {
     #[deref] view: View,
 }
 
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum LoginStatusModalAction {
+    #[default]
     None,
     Close,
 }
@@ -106,9 +101,9 @@ impl Widget for LoginStatusModal {
 }
 
 impl WidgetMatchEvent for LoginStatusModal {
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
         let widget_uid = self.widget_uid();
-        let button = self.button(ids!(button));
+        let button = self.button(cx, ids!(button));
 
         let modal_dismissed = actions
             .iter()
@@ -122,7 +117,7 @@ impl WidgetMatchEvent for LoginStatusModal {
             // a `LoginStatusModalAction::Close` action, as that would cause
             // an infinite action feedback loop.
             if !modal_dismissed {
-                cx.widget_action(widget_uid, &scope.path, LoginStatusModalAction::Close);
+                cx.widget_action(widget_uid,  LoginStatusModalAction::Close);
             }
         }
     }
@@ -131,17 +126,17 @@ impl WidgetMatchEvent for LoginStatusModal {
 impl LoginStatusModal {
     /// Sets the title text displayed in the modal.
     fn set_title(&mut self, cx: &mut Cx, title: &str) {
-        self.label(ids!(title)).set_text(cx, title);
+        self.label(cx, ids!(title)).set_text(cx, title);
     }
 
     /// Sets the status text displayed in the body of the modal.
     fn set_status(&mut self, cx: &mut Cx, status: &str) {
-        self.label(ids!(status)).set_text(cx, status);
+        self.label(cx, ids!(status)).set_text(cx, status);
     }
 
     /// Returns a reference to the modal's button, enabling you to set its properties.
-    fn button_ref(&self) -> ButtonRef {
-        self.button(ids!(button))
+    fn button_ref(&self, cx: &mut Cx) -> ButtonRef {
+        self.button(cx, ids!(button))
     }
 }
 
@@ -161,9 +156,9 @@ impl LoginStatusModalRef {
     }
 
     /// See [`LoginStatusModal::button_ref()`].
-    pub fn button_ref(&self) -> ButtonRef {
+    pub fn button_ref(&self, cx: &mut Cx) -> ButtonRef {
         self.borrow()
-            .map(|inner| inner.button_ref())
+            .map(|inner| inner.button_ref(cx))
             .unwrap_or_default()
     }
 }
diff --git a/src/login/mod.rs b/src/login/mod.rs
index f269c0e11..13d5b39bd 100644
--- a/src/login/mod.rs
+++ b/src/login/mod.rs
@@ -1,9 +1,9 @@
-use makepad_widgets::*;
+use makepad_widgets::ScriptVm;
 
 pub mod login_screen;
 pub mod login_status_modal;
 
-pub fn live_design(cx: &mut Cx) {
-    login_screen::live_design(cx);
-    login_status_modal::live_design(cx);
+pub fn script_mod(vm: &mut ScriptVm) {
+    login_status_modal::script_mod(vm);
+    login_screen::script_mod(vm);
 }
diff --git a/src/logout/logout_confirm_modal.rs b/src/logout/logout_confirm_modal.rs
index 3631d1ca0..95559d1da 100644
--- a/src/logout/logout_confirm_modal.rs
+++ b/src/logout/logout_confirm_modal.rs
@@ -1,97 +1,96 @@
 use std::sync::Arc;
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 use tokio::sync::Notify;
-use crate::{shared::styles::COLOR_FG_DANGER_RED, sliding_sync::{submit_async_request, MatrixRequest}};
+use crate::sliding_sync::{submit_async_request, MatrixRequest};
 use super::logout_state_machine::is_logout_past_point_of_no_return;
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
     // A modal dialog that displays logout confirmation
-    pub LogoutConfirmModal = {{LogoutConfirmModal}} {
+    mod.widgets.LogoutConfirmModal = #(LogoutConfirmModal::register_widget(vm)) {
         width: Fit,
         height: Fit,
 
-        <RoundedView> {
+        RoundedView {
             width: 400,
             height: Fit,
             flow: Down,
-            align: {x: 0.5},
+            align: Align{x: 0.5},
             padding: 25,
             spacing: 10,
 
             show_bg: true,
-            draw_bg: {
-                color: #FFFFFF
+            draw_bg +: {
+                color: instance(#FFFFFF)
             }
             margin: 0
 
-            <View> {
+            View {
                 width: Fill,
                 height: Fit,
                 flow: Right,
-                padding: {top: 0, bottom: 10},
-                align: {x: 0.5, y: 0.0},
+                padding: Inset{top: 0, bottom: 10},
+                align: Align{x: 0.5, y: 0.0},
 
-                title = <Label> {
+                title := Label {
                     text: "Confirm Logout",
-                    draw_text: {
-                            text_style: <TITLE_TEXT>{font_size: 18},
+                    draw_text +: {
+                            text_style: TITLE_TEXT {font_size: 18},
                             color: #000000
                     }
                 }
             }
 
-            message = <Label> {
+            message := Label {
                 width: Fill,
-                margin: {top: 10, bottom: 20},
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{
+                margin: Inset{top: 10, bottom: 20},
+                draw_text +: {
+                    text_style: REGULAR_TEXT {
                         font_size: 14,
                     },
                     color: #000000,
-                    wrap: Word
+                    flow: Flow.Right{wrap: true}
                 },
                 text: "Are you sure you want to logout?"
             }
 
-            <View> {
+            View {
                 width: Fill,
                 height: Fit,
                 flow: Right,
-                align: {x: 0.5, y: 0.5},
+                align: Align{x: 0.5, y: 0.5},
                 spacing: 10.0,
 
-                cancel_button = <RobrixIconButton> {
+                cancel_button := RobrixIconButton {
                     width: Fit, height: Fit,
                     padding: 10,
-                    draw_bg: {
-                        color: (COLOR_SECONDARY)
+                    draw_bg +: {
+                        color: instance((COLOR_SECONDARY))
                     },
                     text: "Cancel"
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_TEXT)
-                        text_style: <REGULAR_TEXT> {font_size: 14}
+                        text_style: REGULAR_TEXT {font_size: 14}
                     },
                 }
 
-                confirm_button = <RobrixIconButton> {
+                confirm_button := RobrixIconButton {
                     width: Fit, height: Fit,
                     padding: 10,
-                    draw_bg: { color: (COLOR_BG_DANGER_RED) },
-                    draw_icon: {
-                            svg_file: (ICON_LOGOUT)
+                    draw_bg +: { color: instance((COLOR_BG_DANGER_RED))},
+                    draw_icon +: {
+                            svg: (ICON_LOGOUT)
                             color: (COLOR_FG_DANGER_RED),
                     },
                     text: "Logout Now"
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_FG_DANGER_RED)
-                        text_style: <REGULAR_TEXT> {font_size: 14}
+                        text_style: REGULAR_TEXT {font_size: 14}
                     },
                 }
             }
@@ -100,7 +99,7 @@ live_design! {
 }
 
 /// A modal dialog that displays logout confirmation.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct LogoutConfirmModal {
     #[deref] view: View,
     /// Whether the modal is in a final state, meaning the user can only click "Okay" to close it.
@@ -112,7 +111,7 @@ pub struct LogoutConfirmModal {
 }
 
 /// Actions handled by the parent widget of the [`LogoutConfirmModal`].
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum LogoutConfirmModalAction {
     /// The modal should be opened
     Open,
@@ -124,6 +123,7 @@ pub enum LogoutConfirmModalAction {
         /// Whether the modal was dismissed by the user clicking an internal button.
         was_internal: bool,
     },
+    #[default]
     None,
 }
 
@@ -172,12 +172,13 @@ impl std::fmt::Debug for LogoutAction {
 
 /// Indicates which critical component was cleared during a failed logout attempt
 /// that reached the point of no return, requiring application restart.
-#[derive(Clone, Copy, Debug, DefaultNone)]
+#[derive(Clone, Copy, Debug, Default)]
 pub enum ClearedComponentType {
     /// The Matrix client was cleared during logout
     Client,
     /// The sync service was cleared during logout
     SyncService,
+    #[default]
     None,
 }
 
@@ -194,8 +195,8 @@ impl Widget for LogoutConfirmModal {
 
 impl WidgetMatchEvent for LogoutConfirmModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let cancel_button = self.button(ids!(cancel_button));
-        let confirm_button = self.button(ids!(confirm_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
+        let confirm_button = self.button(cx, ids!(confirm_button));
 
         let modal_dismissed = actions.iter().any(|a| matches!(a.downcast_ref(), Some(ModalAction::Dismissed)));
         let cancel_clicked = cancel_button.clicked(actions);
@@ -245,13 +246,13 @@ impl WidgetMatchEvent for LogoutConfirmModal {
 
                 Some(LogoutAction::LogoutFailure(error)) => {
                     if is_logout_past_point_of_no_return() {
-                        self.label(ids!(title)).set_text(cx, "Logout error, please restart Robrix.");
+                        self.label(cx, ids!(title)).set_text(cx, "Logout error, please restart Robrix.");
                         self.set_message(cx, "The logout process encountered an error when communicating with the homeserver. Since your login session has been partially invalidated, Robrix must restart in order to continue to properly function.");
 
                         confirm_button.set_text(cx, "Restart now");
                         confirm_button.apply_over(cx, live!{
                             draw_bg: {
-                                color: (COLOR_FG_DANGER_RED)
+                                color: instance((COLOR_FG_DANGER_RED))
                             }
                         });
                         confirm_button.set_enabled(cx, true);
@@ -270,13 +271,13 @@ impl WidgetMatchEvent for LogoutConfirmModal {
                 }
 
                 Some(LogoutAction::ApplicationRequiresRestart { .. }) => {
-                    self.label(ids!(title)).set_text(cx, "Logout error, please restart Robrix.");
+                    self.label(cx, ids!(title)).set_text(cx, "Logout error, please restart Robrix.");
                     self.set_message(cx, "Application is in an inconsistent state and needs to be restarted to continue.");
 
                     confirm_button.set_text(cx, "Restart now");
                     confirm_button.apply_over(cx, live!{
                         draw_bg: {
-                            color: (COLOR_FG_DANGER_RED)
+                            color: instance((COLOR_FG_DANGER_RED))
                         }
                     });
                     confirm_button.set_enabled(cx, true);
@@ -310,12 +311,12 @@ impl WidgetMatchEvent for LogoutConfirmModal {
 impl LogoutConfirmModal {
     /// Sets the message text displayed in the body of the modal.
     pub fn set_message(&mut self, cx: &mut Cx, message: &str) {
-        self.label(ids!(message)).set_text(cx, message);
+        self.label(cx, ids!(message)).set_text(cx, message);
     }
 
     fn reset_state(&mut self, cx: &mut Cx) {
-        let cancel_button = self.button(ids!(cancel_button));
-        let confirm_button = self.button(ids!(confirm_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
+        let confirm_button = self.button(cx, ids!(confirm_button));
         self.final_success = None;
         self.set_message(cx, "Are you sure you want to logout?");
         confirm_button.set_enabled(cx, true);
diff --git a/src/logout/logout_state_machine.rs b/src/logout/logout_state_machine.rs
index 1f6f4a551..3ccb922ca 100644
--- a/src/logout/logout_state_machine.rs
+++ b/src/logout/logout_state_machine.rs
@@ -582,7 +582,7 @@ fn set_logout_in_progress(value: bool) {
 
 /// Execute logout using the state machine
 pub async fn logout_with_state_machine(is_desktop: bool) -> Result<()> {
-    log!("logout_with_state_machine called with is_desktop={}", is_desktop);
+    log!("logout_with_state_machine called with is_desktop: {}", is_desktop);
     
     let config = LogoutConfig {
         is_desktop,
diff --git a/src/logout/mod.rs b/src/logout/mod.rs
index 1b2434da6..9112d192d 100644
--- a/src/logout/mod.rs
+++ b/src/logout/mod.rs
@@ -1,9 +1,9 @@
-use makepad_widgets::*;
+use makepad_widgets::ScriptVm;
 
 pub mod logout_confirm_modal;
 pub mod logout_state_machine;
 pub mod logout_errors;
 
-pub fn live_design(cx: &mut Cx) {
-    logout_confirm_modal::live_design(cx);
-}
\ No newline at end of file
+pub fn script_mod(vm: &mut ScriptVm) {
+    logout_confirm_modal::script_mod(vm);
+}
diff --git a/src/profile/mod.rs b/src/profile/mod.rs
index 0d1b7f92c..30b3576e8 100644
--- a/src/profile/mod.rs
+++ b/src/profile/mod.rs
@@ -1,8 +1,8 @@
-use makepad_widgets::Cx;
+use makepad_widgets::ScriptVm;
 
 pub mod user_profile;
 pub mod user_profile_cache;
 
-pub fn live_design(cx: &mut Cx) {
-    user_profile::live_design(cx);
+pub fn script_mod(vm: &mut ScriptVm) {
+    user_profile::script_mod(vm);
 }
diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index a8ce2ea62..514be2d1c 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -60,194 +60,192 @@ impl DerefMut for UserProfileAndRoomId {
     }
 }
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
-    use link::tsp_link::TspVerifyUser;
 
-    ICON_DOUBLE_CHAT = dep("crate://self/resources/icons/double_chat.svg")
+    mod.widgets.ICON_DOUBLE_CHAT = crate_resource("self://resources/icons/double_chat.svg")
 
-    UserProfileView = <ScrollXYView> {
+    mod.widgets.UserProfileView = ScrollXYView {
         width: Fill,
         height: Fill,
-        align: {x: 0.5, y: 0},
-        padding: {left: 15, right: 15, top: 15, bottom: 50}
+        align: Align{x: 0.5, y: 0},
+        padding: Inset{left: 15, right: 15, top: 15, bottom: 50}
         spacing: 20,
         flow: Down,
-        cursor: Default,
+        cursor: MouseCursor.Default,
 
         show_bg: true,
-        draw_bg: {
-            color: (COLOR_PRIMARY)
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY))
         }
 
-        personal_info = <View> {
+        personal_info := View {
             width: Fill, height: Fit
-            align: {x: 0.5, y: 0.0}
-            padding: {left: 10, right: 10}
+            align: Align{x: 0.5, y: 0.0}
+            padding: Inset{left: 10, right: 10}
             spacing: 3
             flow: Down
 
-            avatar = <Avatar> {
+            avatar := Avatar {
                 width: 150,
                 height: 150,
                 margin: 10.0,
-                text_view = { text = { draw_text: {
-                    text_style: { font_size: 40.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: theme.font_regular { font_size: 40.0 }
+                        }
+                    }
+                }
             }
 
-            user_name = <Label> {
+            user_name := Label {
                 width: Fill, height: Fit
-                align: {x: 0.5}
-                draw_text: {
-                    wrap: Word,
+                align: Align{x: 0.5}
+                draw_text +: {
+                    flow: Flow.Right{wrap: true},
                     color: #000,
-                    text_style: <USERNAME_TEXT_STYLE>{ font_size: 12 },
+                    text_style: USERNAME_TEXT_STYLE { font_size: 12 },
                 }
                 text: "User Name"
             }
 
-            user_id = <Label> {
+            user_id := Label {
                 width: Fill, height: Fit
-                align: {x: 0.5}
-                draw_text: {
+                align: Align{x: 0.5}
+                draw_text +: {
                     wrap: Line,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
                 text: "User ID"
             }
         }
 
-        <LineH> { padding: 15 }
+        LineH { padding: 15 }
         
-        membership = <View> {
+        membership := View {
             width: Fill,
             height: Fit,
             flow: Down,
             spacing: 3,
-            align: {x: 0.0, y: 0.0}
-            padding: {left: 10, right: 10}
+            align: Align{x: 0.0, y: 0.0}
+            padding: Inset{left: 10, right: 10}
 
-            membership_title_label = <Label> {
+            membership_title_label := Label {
                 width: Fill, height: Fit
-                draw_text: {
-                    wrap: Word,
-                    text_style: <USERNAME_TEXT_STYLE>{ font_size: 11.5 },
+                draw_text +: {
+                    flow: Flow.Right{wrap: true},
+                    text_style: USERNAME_TEXT_STYLE { font_size: 11.5 },
                     color: #000
                 }
                 text: "Membership in this room"
             }
 
-            membership_status_label = <Label> {
-                margin: { left: 7 }
+            membership_status_label := Label {
+                margin: Inset{ left: 7 }
                 width: Fill, height: Fit
-                draw_text: {
+                draw_text +: {
                     wrap: Line,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
                 text: "Unknown"
             }
 
-            role_info_label = <Label> {
-                margin: { left: 7 }
+            role_info_label := Label {
+                margin: Inset{ left: 7 }
                 width: Fill, height: Fit
-                draw_text: {
+                draw_text +: {
                     wrap: Line,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
                 text: "Unknown"
             }
         }
 
-        <LineH> { padding: 15 }
+        LineH { padding: 15 }
 
-        action_buttons = <View> {
+        action_buttons := View {
             width: Fill, height: Fit
             flow: Down,
             spacing: 10,
-            padding: {left: 10., right: 10, bottom: 10}
+            padding: Inset{left: 10., right: 10, bottom: 10}
 
-            <Label> {
+            Label {
                 width: Fill, height: Fit
-                draw_text: {
+                draw_text +: {
                     wrap: Line,
-                    text_style: <USERNAME_TEXT_STYLE>{ font_size: 11.5 },
+                    text_style: USERNAME_TEXT_STYLE { font_size: 11.5 },
                     color: #000
                 }
                 text: "Actions"
             }
 
-            direct_message_button = <RobrixIconButton> {
+            direct_message_button := RobrixIconButton {
                 margin: 0,
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_DOUBLE_CHAT)
+                draw_icon +: {
+                    svg: (mod.widgets.ICON_DOUBLE_CHAT)
                     color: (COLOR_PRIMARY)
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_PRIMARY)
-                    text_style: <REGULAR_TEXT> {}
+                    text_style: REGULAR_TEXT {}
                 }
-                icon_walk: {width: 22, height: 16, margin: {left: -5, right: -3, top: 1, bottom: -1} }
+                icon_walk: Walk{width: 22, height: 16, margin: Inset{left: -5, right: -3, top: 1, bottom: -1} }
                 text: "Direct Message"
             }
 
-            copy_link_to_user_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
+            copy_link_to_user_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
                 margin: 0,
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_COPY)
+                draw_icon +: {
+                    svg: (ICON_COPY)
                 }
-                icon_walk: {width: 16, height: 16, margin: {left: -1, right: -1} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -1, right: -1} }
                 text: "Copy Link to User"
             }
 
-            jump_to_read_receipt_button = <RobrixIconButton> {
+            jump_to_read_receipt_button := RobrixIconButton {
                 enabled: false, // TODO: support this button
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
                 margin: 0,
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_JUMP)
+                draw_icon +: {
+                    svg: (ICON_JUMP)
                 }
-                icon_walk: {width: 14, height: 16, margin: {left: -1, right: 1.5}}
+                icon_walk: Walk{width: 14, height: 16, margin: Inset{left: -1, right: 1.5}}
                 text: "Jump to Read Receipt"
             }
 
-            ignore_user_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
+            ignore_user_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
                 margin: 0,
-                draw_icon: {
-                    svg_file: (ICON_FORBIDDEN)
+                draw_icon +: {
+                    svg: (ICON_FORBIDDEN)
                     color: (COLOR_FG_DANGER_RED),
                 }
-                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -0.5} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -0.5} }
 
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                 }
                 text: "Ignore (Block) User"
-                draw_text:{
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
             }
@@ -255,81 +253,81 @@ live_design! {
 
         // A view that allows the user to verify a new DID and associate it
         // with a particular Matrix User ID.
-        tsp_verify_user = <TspVerifyUser> { }
+        tsp_verify_user := TspVerifyUser { }
     }
 
 
-    pub UserProfileSlidingPane = {{UserProfileSlidingPane}} {
+    mod.widgets.UserProfileSlidingPane = #(UserProfileSlidingPane::register_widget(vm)) {
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        align: {x: 1.0, y: 0}
+        align: Align{x: 1.0, y: 0}
 
-        bg_view = <View> {
+        bg_view := SolidView {
             width: Fill
             height: Fill
             visible: false,
             show_bg: true
-            draw_bg: {
-                uniform bg_color: #000000BB
-                fn pixel(self) -> vec4 {
+            draw_bg +: {
+                bg_color: uniform(#000000BB)
+                pixel: fn() {
                     return self.bg_color;
                 }
             }
         }
 
-        main_content = <FadeView> {
+        main_content := FadeView {
             width: 300,
             height: Fill
             flow: Overlay,
-            align: {x: 1.0}
+            align: Align{x: 1.0}
 
-            user_profile_view = <UserProfileView> { }
+            user_profile_view := mod.widgets.UserProfileView { }
 
             // The "X" close button on the top right
-            close_button = <RobrixIconButton> {
+            close_button := RobrixIconButton {
                 width: Fit,
                 height: Fit,
                 spacing: 0,
                 margin: 7,
                 padding: 15,
 
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_CLOSE),
-                    fn get_color(self) -> vec4 {
+                draw_icon +: {
+                    svg: (ICON_CLOSE),
+                    get_color: fn() -> vec4 {
                         return #x0;
                     }
                 }
-                icon_walk: {width: 14, height: 14}
+                icon_walk: Walk{width: 14, height: 14}
             }
         }
 
-        animator: {
-            panel = {
-                default: hide,
-                show = {
+        animator: Animator{
+            panel: {
+                default: @hide
+                show: AnimatorState{
                     redraw: true,
                     from: {all: Forward {duration: 0.4}}
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: {
-                        main_content = { margin: {right: 0} },
-                        bg_view = {
-                            draw_bg: { bg_color: #000000BB }
+                        main_content: { margin: Inset{right: 0} },
+                        bg_view: {
+                            draw_bg: { bg_color: instance(#000000BB)}
                         }
                     }
                 }
-                hide = {
+                hide: AnimatorState{
                     redraw: true,
                     from: {all: Forward {duration: 0.5}}
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: {
-                        main_content = { margin: {right: -300} },
-                        bg_view = {
-                            draw_bg: { bg_color: #x00000000 }
+                        main_content: { margin: Inset{right: -300} },
+                        bg_view: {
+                            draw_bg: { bg_color: instance(#x00000000)}
                         }
                     }
                 }
@@ -339,9 +337,10 @@ live_design! {
 }
 
 
-#[derive(Clone, DefaultNone, Debug)]
+#[derive(Clone, Default, Debug)]
 pub enum ShowUserProfileAction {
     ShowUserProfile(UserProfileAndRoomId),
+    #[default]
     None,
 }
 
@@ -399,8 +398,9 @@ impl UserProfilePaneInfo {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct UserProfileSlidingPane {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 
@@ -421,11 +421,14 @@ impl Widget for UserProfileSlidingPane {
         // If the animator is in the `hide` state and has finished animating out,
         // that means it has fully animated off-screen and can be set to invisible.
         if self.animator_in_state(cx, ids!(panel.hide)) {
-            match (self.is_animating_out, animator_action.is_animating()) {
+            match (
+                self.is_animating_out,
+                matches!(animator_action, AnimatorAction::Animating { .. }),
+            ) {
                 (true, false) => {
                     self.visible = false;
                     cx.revert_key_focus();
-                    self.view(ids!(bg_view)).set_visible(cx, false);
+                    self.view(cx, ids!(bg_view)).set_visible(cx, false);
                     self.redraw(cx);
                     return;
                 }
@@ -447,7 +450,7 @@ impl Widget for UserProfileSlidingPane {
         let close_pane = {
             matches!(
                 event,
-                Event::Actions(actions) if self.button(ids!(close_button)).clicked(actions)
+                Event::Actions(actions) if self.button(cx, ids!(close_button)).clicked(actions)
             )
             || event.back_pressed()
             || match event.hits_with_capture_overload(cx, area, true) {
@@ -458,7 +461,7 @@ impl Widget for UserProfileSlidingPane {
                 }
                 Hit::FingerUp(fue) if fue.is_over => {
                     fue.mouse_button().is_some_and(|b| b.is_back())
-                    || !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
+                    || !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                 _ => false,
             }
@@ -517,7 +520,7 @@ impl Widget for UserProfileSlidingPane {
         let Some(info) = self.info.as_ref() else { return };
 
         if let Event::Actions(actions) = event {
-            if self.button(ids!(direct_message_button)).clicked(actions) {
+            if self.button(cx, ids!(direct_message_button)).clicked(actions) {
                 submit_async_request(MatrixRequest::OpenOrCreateDirectMessage {
                     user_profile: info.user_profile.clone(),
                     // Don't just create a new DM room; we want to first get confirmation from the user.
@@ -525,7 +528,7 @@ impl Widget for UserProfileSlidingPane {
                 });
             }
 
-            if self.button(ids!(copy_link_to_user_button)).clicked(actions) {
+            if self.button(cx, ids!(copy_link_to_user_button)).clicked(actions) {
                 let matrix_to_uri = info.user_id.matrix_to_uri().to_string();
                 cx.copy_to_clipboard(&matrix_to_uri);
                 enqueue_popup_notification(
@@ -541,7 +544,7 @@ impl Widget for UserProfileSlidingPane {
 
             // The `ignore_user_button` require room membership info.
             if let Some(room_member) = info.room_member.as_ref() {
-                if self.button(ids!(ignore_user_button)).clicked(actions) {
+                if self.button(cx, ids!(ignore_user_button)).clicked(actions) {
                     submit_async_request(MatrixRequest::IgnoreUser {
                         ignore: !room_member.is_ignored(),
                         room_id: info.room_id.clone(),
@@ -564,20 +567,20 @@ impl Widget for UserProfileSlidingPane {
         };
 
         // Set the user name, using the user ID as a fallback.
-        self.label(ids!(user_name)).set_text(cx, info.displayable_name());
-        self.label(ids!(user_id)).set_text(cx, info.user_id.as_str());
+        self.label(cx, ids!(user_name)).set_text(cx, info.displayable_name());
+        self.label(cx, ids!(user_id)).set_text(cx, info.user_id.as_str());
 
         // Set the avatar image, using the user name as a fallback.
-        let avatar_ref = self.avatar(ids!(avatar));
+        let avatar_ref = self.avatar(cx, ids!(avatar));
         info.avatar_state
             .data()
             .and_then(|data| avatar_ref.show_image(cx, None, |cx, img| utils::load_png_or_jpg(&img, cx, data)).ok())
             .unwrap_or_else(|| avatar_ref.show_text(cx, None, None, info.displayable_name()));
 
         // Set the membership status and role in the room.
-        self.label(ids!(membership_title_label)).set_text(cx, &info.membership_title());
-        self.label(ids!(membership_status_label)).set_text(cx, info.membership_status());
-        self.label(ids!(role_info_label)).set_text(cx, info.role_in_room().as_ref());
+        self.label(cx, ids!(membership_title_label)).set_text(cx, &info.membership_title());
+        self.label(cx, ids!(membership_status_label)).set_text(cx, info.membership_status());
+        self.label(cx, ids!(role_info_label)).set_text(cx, info.role_in_room().as_ref());
 
         // Draw and show/hide the buttons according to user and room membership info:
         // * `direct_message_button` is hidden if the user is the same as the account user,
@@ -591,9 +594,9 @@ impl Widget for UserProfileSlidingPane {
             .map(|rm| rm.is_account_user())
             .unwrap_or_else(|| current_user_id().is_some_and(|uid| uid == info.user_id));
 
-        self.button(ids!(direct_message_button)).set_visible(cx, !is_pane_showing_current_account);
+        self.button(cx, ids!(direct_message_button)).set_visible(cx, !is_pane_showing_current_account);
 
-        let ignore_user_button = self.button(ids!(ignore_user_button));
+        let ignore_user_button = self.button(cx, ids!(ignore_user_button));
         ignore_user_button.set_visible(cx, !is_pane_showing_current_account && info.room_member.is_some());
         // Unfortunately the Matrix SDK's RoomMember type does not properly track
         // the `ignored` state of a user, so we have to maintain it separately.
@@ -657,7 +660,7 @@ impl UserProfileSlidingPane {
         // If TSP is enabled, populate the TSP verification info for this user.
         #[cfg(feature = "tsp")] {
             use crate::tsp::verify_user::TspVerifyUserWidgetExt;
-            self.view.tsp_verify_user(ids!(tsp_verify_user))
+            self.view.tsp_verify_user(cx, ids!(tsp_verify_user))
                 .show(cx, info.user_id.clone());
         }
 
@@ -668,13 +671,13 @@ impl UserProfileSlidingPane {
         self.visible = true;
         cx.set_key_focus(self.view.area());
         self.animator_play(cx, ids!(panel.show));
-        self.view(ids!(bg_view)).set_visible(cx, true);
+        self.view(cx, ids!(bg_view)).set_visible(cx, true);
 
-        self.view.button(ids!(close_button)).reset_hover(cx);
-        self.view.button(ids!(direct_message_button)).reset_hover(cx);
-        self.view.button(ids!(copy_link_to_user_button)).reset_hover(cx);
-        self.view.button(ids!(jump_to_read_receipt_button)).reset_hover(cx);
-        self.view.button(ids!(ignore_user_button)).reset_hover(cx);
+        self.view.button(cx, ids!(close_button)).reset_hover(cx);
+        self.view.button(cx, ids!(direct_message_button)).reset_hover(cx);
+        self.view.button(cx, ids!(copy_link_to_user_button)).reset_hover(cx);
+        self.view.button(cx, ids!(jump_to_read_receipt_button)).reset_hover(cx);
+        self.view.button(cx, ids!(ignore_user_button)).reset_hover(cx);
         self.redraw(cx);
     }
 }
@@ -687,9 +690,9 @@ impl UserProfileSlidingPaneRef {
     }
 
     /// See [`UserProfileSlidingPane::set_info()`]
-    pub fn set_info(&self, _cx: &mut Cx, info: UserProfilePaneInfo) {
+    pub fn set_info(&self, cx: &mut Cx, info: UserProfilePaneInfo) {
         let Some(mut inner) = self.borrow_mut() else { return };
-        inner.set_info(_cx, info);
+        inner.set_info(cx, info);
     }
 
     /// See [`UserProfileSlidingPane::show()`]
diff --git a/src/profile/user_profile_cache.rs b/src/profile/user_profile_cache.rs
index 15de2012c..a669929e8 100644
--- a/src/profile/user_profile_cache.rs
+++ b/src/profile/user_profile_cache.rs
@@ -240,12 +240,12 @@ where
 /// which isn't used, but acts as a guarantee that this function
 /// must only be called by the main UI thread.
 pub fn get_user_display_name_for_room(
-    _cx: &mut Cx,
+    cx: &mut Cx,
     user_id: OwnedUserId,
     room_id: Option<&OwnedRoomId>,
     fetch_if_missing: bool,
 ) -> CachedName {
-    let opt = with_user_profile(_cx, user_id, room_id, fetch_if_missing, |profile, rooms| {
+    let opt = with_user_profile(cx, user_id, room_id, fetch_if_missing, |profile, rooms| {
         room_id.and_then(|id| rooms.get(id)).map_or_else(
             || CachedName::FoundInProfile(profile.username.clone()),
             |rm| CachedName::FoundInRoom(rm.display_name().map(|n| n.to_owned())),
diff --git a/src/room/mod.rs b/src/room/mod.rs
index cc8850257..68b20bae9 100644
--- a/src/room/mod.rs
+++ b/src/room/mod.rs
@@ -1,7 +1,7 @@
 //! Widgets, types, and functions related to a Matrix room.
 
 use std::sync::Arc;
-use makepad_widgets::Cx;
+use makepad_widgets::ScriptVm;
 use matrix_sdk::{RoomDisplayName, RoomHero, RoomState, SuccessorRoom, room_preview::RoomPreview};
 use ruma::{OwnedRoomAliasId, OwnedRoomId, room::{JoinRuleSummary, RoomType}};
 
@@ -12,10 +12,10 @@ pub mod room_input_bar;
 pub mod room_display_filter;
 pub mod typing_notice;
 
-pub fn live_design(cx: &mut Cx) {
-    reply_preview::live_design(cx);
-    room_input_bar::live_design(cx);
-    typing_notice::live_design(cx);
+pub fn script_mod(vm: &mut ScriptVm) {
+    reply_preview::script_mod(vm);
+    room_input_bar::script_mod(vm);
+    typing_notice::script_mod(vm);
 }
 
 /// Info about a room, either partially or completely known.
diff --git a/src/room/reply_preview.rs b/src/room/reply_preview.rs
index 9a182cd9c..72955dcb0 100644
--- a/src/room/reply_preview.rs
+++ b/src/room/reply_preview.rs
@@ -5,127 +5,128 @@
 
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::*;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::html_or_plaintext::*;
-
-    ReplyPreviewContent = <View> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.ReplyPreviewContent = View {
         width: Fill
         height: Fit
         flow: Down
-        padding: {left: 16.0, bottom: 5.0, top: 2.0, right: 11.0}
-        cursor: Hand,
+        padding: Inset{left: 16.0, bottom: 5.0, top: 2.0, right: 11.0}
+        cursor: MouseCursor.Hand,
 
-        <View> {
+        View {
             width: Fill
             height: Fit
             flow: Right
-            margin: { bottom: 10.0, top: 0.0, right: 5.0 }
-            align: {y: 0.5}
+            margin: Inset{ bottom: 10.0, top: 0.0, right: 5.0 }
+            align: Align{y: 0.5}
 
-            reply_preview_avatar = <Avatar> {
+            reply_preview_avatar := Avatar {
                 width: 19.,
                 height: 19.,
-                text_view = { text = { draw_text: {
-                    text_style: { font_size: 6.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: theme.font_regular { font_size: 6.0 }
+                        }
+                    }
+                }
             }
 
-            reply_preview_username = <Label> {
+            reply_preview_username := Label {
                 width: Fill,
                 flow: Right, // do not wrap
-                margin: { left: 5.0, top: 2 }
-                draw_text: {
-                    text_style: <USERNAME_TEXT_STYLE> { font_size: 10 },
+                margin: Inset{ left: 5.0, top: 2 }
+                draw_text +: {
+                    text_style: USERNAME_TEXT_STYLE { font_size: 10 },
                     color: (USERNAME_TEXT_COLOR)
-                    wrap: Ellipsis,
+                    flow: Flow.Right{wrap: true},
                 }
                 text: "<Username not available>"
             }
         }
 
-        reply_preview_body = <HtmlOrPlaintext> {
-            margin: {left: 1.5}
-            html_view = { html = {
-                font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE)
-                    draw_normal:      { text_style: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) } },
-                    draw_italic:      { text_style: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) } },
-                    draw_bold:        { text_style: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) } },
-                    draw_bold_italic: { text_style: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) } },
-                    draw_fixed:       { text_style: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) } },
-                    // a = { draw_text:  { text_style: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) } } },
-            } }
-            plaintext_view = { pt_label = {
-                draw_text: {
-                    text_style: <MESSAGE_TEXT_STYLE> { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) },
+        reply_preview_body := HtmlOrPlaintext {
+            margin: Inset{left: 1.5}
+            html_view +: {
+                html +: {
+                    font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE)
+                    text_style_normal: theme.font_regular { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
+                    text_style_italic: theme.font_italic { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
+                    text_style_bold: theme.font_bold { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
+                    text_style_bold_italic: theme.font_bold_italic { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
+                    text_style_fixed: theme.font_code { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
                 }
-            } }
+            }
+            plaintext_view +: {
+                pt_label +: {
+                    draw_text +: {
+                        text_style: MESSAGE_TEXT_STYLE { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) },
+                    }
+                }
+            }
         }
     }
 
     // A view that shows a preview of the message that the user is currently drafting a reply to,
     // along with a "Replying to" label and a cancel button.
-    pub ReplyingPreview = <View> {
+    mod.widgets.ReplyingPreview = View {
         visible: false
         width: Fill
         height: Fit
         flow: Down
-        padding: { left: 9, right: 9 }
+        padding: Inset{ left: 9, right: 9 }
 
         // Displays a "Replying to" label and a cancel button
         // above the preview of the message being replied to.
-        <View> {
+        View {
             width: Fill
             height: Fit
             flow: Right
-            align: {y: 0.5}
-            padding: {left: 14, right: 6, top: 10, bottom: 0}
+            align: Align{y: 0.5}
+            padding: Inset{left: 14, right: 6, top: 10, bottom: 0}
 
-            <Label> {
+            Label {
                 width: Fill,
                 flow: Right, // do not wrap
                 // Vertically align the text with the X icon in the cancel_reply_button
-                padding: {top: 5}
+                padding: Inset{top: 5}
 
-                draw_text: {
-                    text_style: <USERNAME_TEXT_STYLE> {},
+                draw_text +: {
+                    text_style: USERNAME_TEXT_STYLE {},
                     color: #222,
-                    wrap: Ellipsis,
+                    flow: Flow.Right{wrap: true},
                 }
                 text: "Replying to:"
             }
 
-            cancel_reply_button = <RobrixIconButton> {
+            cancel_reply_button := RobrixIconButton {
                 width: Fit,
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: {left: 5, right: 0},
+                margin: Inset{left: 5, right: 0},
 
-                draw_bg: {
-                    border_color: (COLOR_FG_DANGER_RED),
-                    color: (COLOR_BG_DANGER_RED)
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DANGER_RED)),
+                    color: instance((COLOR_BG_DANGER_RED))
                     border_radius: 5
                 }
-                draw_icon: {
-                    svg_file: (ICON_CLOSE),
+                draw_icon +: {
+                    svg: (ICON_CLOSE),
                     color: (COLOR_FG_DANGER_RED)
                 }
-                icon_walk: {width: 16, height: 16, margin: 0}
+                icon_walk: Walk{width: 16, height: 16, margin: 0}
             }
         }
 
-        reply_preview_content = <ReplyPreviewContent> { }
+        reply_preview_content := mod.widgets.ReplyPreviewContent { }
 
-        <LineH> {
-            margin: {top: 4.0, left: 5, right: 5} //, bottom: 10}
+        LineH {
+            margin: Inset{top: 4.0, left: 5, right: 5} //, bottom: 10}
         }
     }
 
@@ -133,28 +134,28 @@ live_design! {
     // within a room timeline.
     // That is, this view contains a preview of the earlier message
     // that is shown above the "in-reply-to" message.
-    pub RepliedToMessage = <View> {
+    mod.widgets.RepliedToMessage = View {
         visible: false
         width: Fill
         height: Fit
         flow: Down
 
-        padding: {top: 0.0, right: 12.0, bottom: 0.0, left: 12.0}
+        padding: Inset{top: 0.0, right: 12.0, bottom: 0.0, left: 12.0}
 
         // A reply preview with a vertical bar drawn in the background.
-        replied_to_message_content = <ReplyPreviewContent> {
+        replied_to_message_content := mod.widgets.ReplyPreviewContent {
             show_bg: true
-            draw_bg: {
-                instance vertical_bar_color: (USERNAME_TEXT_COLOR)
-                instance vertical_bar_width: 2.0
-                instance border_radius: 0.0
+            draw_bg +: {
+                vertical_bar_color: instance((USERNAME_TEXT_COLOR))
+                vertical_bar_width: instance(2.0)
+                border_radius: instance(0.0)
 
-                fn get_color(self) -> vec4 {
+                get_color: fn() -> vec4 {
                     return self.color;
                 }
 
-                fn pixel(self) -> vec4 {
-                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                pixel: fn() {
+                    let sdf = Sdf2d.viewport(self.pos * self.rect_size);
 
                     sdf.box(
                         0.0,
diff --git a/src/room/room_input_bar.rs b/src/room/room_input_bar.rs
index 5260f71b7..f85d8af53 100644
--- a/src/room/room_input_bar.rs
+++ b/src/room/room_input_bar.rs
@@ -22,154 +22,146 @@ use matrix_sdk_ui::timeline::{EmbeddedEvent, EventTimelineItem, TimelineEventIte
 use ruma::{events::room::message::{LocationMessageEventContent, MessageType, ReplyWithinThread, RoomMessageEventContent}, OwnedRoomId};
 use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt}, location_preview::LocationPreviewWidgetExt, room_screen::{populate_preview_of_timeline_item, MessageAction, RoomScreenProps}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}}, location::init_location_subscriber, shared::{avatar::AvatarWidgetRefExt, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{enqueue_popup_notification, PopupKind}, styles::*}, sliding_sync::{submit_async_request, MatrixRequest, TimelineKind, UserPowerLevels}, utils};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::*;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::html_or_plaintext::*;
-    use crate::shared::mentionable_text_input::MentionableTextInput;
-    use crate::room::reply_preview::*;
-    use crate::home::location_preview::*;
-    use crate::home::tombstone_footer::TombstoneFooter;
-    use crate::home::editing_pane::*;
-
-    use link::tsp_link::TspSignAnycastCheckbox;
-
-    ICO_LOCATION_PERSON = dep("crate://self/resources/icons/location-person.svg")
-
-
-    pub RoomInputBar = {{RoomInputBar}}<RoundedView> {
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.ICO_LOCATION_PERSON = crate_resource("self://resources/icons/location-person.svg")
+
+
+    mod.widgets.RoomInputBar = set_type_default() do #(RoomInputBar::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         width: Fill,
-        height: Fit { max: Rel { base: Full, factor: 0.625 } }
+        height: Fit
         flow: Down,
 
         // These margins are a hack to make the borders of the RoomInputBar
         // line up with the boundaries of its parent widgets.
         // This only works if the border_color is the same as its parents,
         // which is currently `COLOR_SECONDARY`.
-        margin: {left: -4, right: -4, bottom: -4 }
+        margin: Inset{left: -4, right: -4, bottom: -4 }
 
         show_bg: true,
-        draw_bg: {
-            color: (COLOR_PRIMARY)
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY))
             border_radius: 5.0,
-            border_color: (COLOR_SECONDARY),
+            border_color: instance((COLOR_SECONDARY)),
             border_size: 2.0
-            // uniform shadow_color: #0006
+            // shadow_color: uniform(#0006)
             // shadow_radius: 0.0,
             // shadow_offset: vec2(0.0,0.0)
         }
 
         // The top-most element is a preview of the message that the user is replying to, if any.
-        replying_preview = <ReplyingPreview> { }
+        replying_preview := ReplyingPreview { }
 
         // Below that, display a preview of the current location that a user is about to send.
-        location_preview = <LocationPreview> { }
+        location_preview := LocationPreview { }
 
         // Below that, display one of multiple possible views:
         // * the message input bar (buttons and message TextInput).
         // * a notice that the user can't send messages to this room.
         // * if this room was tombstoned, a "footer" view showing the successor room info.
         // * the EditingPane, which slides up as an overlay in front of the other views below.
-        overlay_wrapper = <View> {
+        overlay_wrapper := View {
             width: Fill,
-            height: Fit { max: Rel { base: Full, factor: 0.625 } }
+            height: Fit
             flow: Overlay,
 
             // Below that, display a view that holds the message input bar and send button.
-            input_bar = <View> {
+            input_bar := View {
                 width: Fill,
-                height: Fit { max: Rel { base: Full, factor: 0.625 } }
+                height: Fit
                 flow: Right
                 // Bottom-align everything to ensure that buttons always stick to the bottom
                 // even when the mentionable_text_input box is very tall.
-                align: {y: 1.0},
+                align: Align{y: 1.0},
                 padding: 6,
 
-                location_button = <RobrixIconButton> {
-                    margin: {left: 4}
+                location_button := RobrixIconButton {
+                    margin: Inset{left: 4}
                     spacing: 0,
-                    draw_icon: {
-                        svg_file: (ICO_LOCATION_PERSON)
+                    draw_icon +: {
+                        svg: (mod.widgets.ICO_LOCATION_PERSON)
                         color: (COLOR_ACTIVE_PRIMARY_DARKER)
                     },
-                    draw_bg: {
-                        color: (COLOR_BG_PREVIEW),
+                    draw_bg +: {
+                        color: instance((COLOR_BG_PREVIEW)),
                     }
-                    icon_walk: {width: Fit, height: 23, margin: {bottom: -1}}
+                    icon_walk: Walk{width: 23, height: 23, margin: Inset{bottom: -1}}
                     text: "",
                 }
 
                 // A checkbox that enables TSP signing for the outgoing message.
                 // If TSP is not enabled, this will be an empty invisible view.
-                tsp_sign_checkbox = <TspSignAnycastCheckbox> {
-                    margin: {bottom: 9, left: 6, right: 0}
+                tsp_sign_checkbox := TspSignAnycastCheckbox {
+                    margin: Inset{bottom: 9, left: 6, right: 0}
                 }
 
-                mentionable_text_input = <MentionableTextInput> {
+                mentionable_text_input := MentionableTextInput {
                     width: Fill,
-                    height: Fit { max: Rel { base: Full, factor: 0.625 } }
-                    margin: { top: 5, bottom: 12, left: 1, right: 1 },
+                    height: Fit
+                    margin: Inset{ top: 5, bottom: 12, left: 1, right: 1 },
 
-                    persistent = {
-                        center = {
-                            text_input = {
+                    persistent := RoundedView {
+                        center := RoundedView {
+                            text_input := RobrixTextInput {
                                 empty_text: "Write a message (in Markdown) ..."
                             }
                         }
                     }
                 }
 
-                send_message_button = <RobrixIconButton> {
+                send_message_button := RobrixIconButton {
                     // Disabled by default; enabled when text is inputted
                     enabled: false,
                     spacing: 0,
-                    margin: {right: 4}
-                    draw_icon: {
-                        svg_file: (ICON_SEND),
+                    margin: Inset{right: 4}
+                    draw_icon +: {
+                        svg: (ICON_SEND),
                         color: (COLOR_FG_DISABLED),
                     }
-                    icon_walk: {width: Fit, height: 21},
-                    draw_bg: {
-                        color: (COLOR_BG_DISABLED),
+                    icon_walk: Walk{width: 21, height: 21},
+                    draw_bg +: {
+                        color: instance((COLOR_BG_DISABLED)),
                     }
                 }
             }
 
-            can_not_send_message_notice = <View> {
+            can_not_send_message_notice := SolidView {
                 visible: false
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                 }
-                padding: {left: 50, right: 50, top: 20, bottom: 20}
-                align: {y: 0.5}
+                padding: Inset{left: 50, right: 50, top: 20, bottom: 20}
+                align: Align{y: 0.5}
                 width: Fill, height: Fit
 
-                text = <Label> {
+                text := Label {
                     width: Fill,
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_TEXT)
-                        text_style: <THEME_FONT_ITALIC>{font_size: 12.2}
-                        wrap: Word,
+                        text_style: theme.font_italic {font_size: 12.2}
+                        flow: Flow.Right{wrap: true},
                     }
                     text: "You don't have permission to post to this room.",
                 }
             }
 
-            tombstone_footer = <TombstoneFooter> { }
+            tombstone_footer := TombstoneFooter { }
 
-            editing_pane = <EditingPane> { }
+            editing_pane := EditingPane { }
         }
     }
 }
 
 /// Main component for message input with @mention support
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomInputBar {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 
     /// Whether the `ReplyingPreview` was visible when the `EditingPane` was shown.
@@ -186,15 +178,14 @@ impl Widget for RoomInputBar {
             .get::<RoomScreenProps>()
             .expect("BUG: RoomScreenProps should be available in Scope::props for RoomInputBar");
 
-        match event.hits(cx, self.view.view(ids!(replying_preview.reply_preview_content)).area()) {
+        match event.hits(cx, self.view.view(cx, ids!(replying_preview.reply_preview_content)).area()) {
             // If the hit occurred on the replying message preview, jump to it.
             Hit::FingerUp(fe) if fe.is_over && fe.is_primary_hit() && fe.was_tap() => {
                 if let Some(event_id) = self.replying_to.as_ref()
                     .and_then(|(event_tl_item, _)| event_tl_item.event_id().map(ToOwned::to_owned))
                 {
                     cx.widget_action(
-                        room_screen_props.room_screen_widget_uid,
-                        &scope.path,
+                        room_screen_props.room_screen_widget_uid, 
                         MessageAction::JumpToEvent(event_id),
                     );
                 } else {
@@ -227,12 +218,12 @@ impl RoomInputBar {
         actions: &Actions,
         room_screen_props: &RoomScreenProps,
     ) {
-        let mentionable_text_input = self.mentionable_text_input(ids!(mentionable_text_input));
-        let text_input = mentionable_text_input.text_input_ref();
+        let mentionable_text_input = self.mentionable_text_input(cx, ids!(mentionable_text_input));
+        let text_input = mentionable_text_input.text_input_ref(cx);
 
         // Clear the replying-to preview pane if the "cancel reply" button was clicked
         // or if the `Escape` key was pressed within the message input box.
-        if self.button(ids!(cancel_reply_button)).clicked(actions)
+        if self.button(cx, ids!(cancel_reply_button)).clicked(actions)
             || text_input.escaped(actions)
         {
             self.clear_replying_to(cx);
@@ -240,7 +231,7 @@ impl RoomInputBar {
         }
 
         // Handle the add location button being clicked.
-        if self.button(ids!(location_button)).clicked(actions) {
+        if self.button(cx, ids!(location_button)).clicked(actions) {
             log!("Add location button clicked; requesting current location...");
             if let Err(_e) = init_location_subscriber(cx) {
                 error!("Failed to initialize location subscriber");
@@ -250,13 +241,13 @@ impl RoomInputBar {
                     None,
                 );
             }
-            self.view.location_preview(ids!(location_preview)).show();
+            self.view.location_preview(cx, ids!(location_preview)).show();
             self.redraw(cx);
         }
 
         // Handle the send location button being clicked.
-        if self.button(ids!(location_preview.send_location_button)).clicked(actions) {
-            let location_preview = self.location_preview(ids!(location_preview));
+        if self.button(cx, ids!(location_preview.send_location_button)).clicked(actions) {
+            let location_preview = self.location_preview(cx, ids!(location_preview));
             if let Some((coords, _system_time_opt)) = location_preview.get_current_data() {
                 let geo_uri = format!("{}{},{}", utils::GEO_URI_SCHEME, coords.latitude, coords.longitude);
                 let message = RoomMessageEventContent::new(
@@ -299,10 +290,10 @@ impl RoomInputBar {
         }
 
         // Handle the send message button being clicked or Cmd/Ctrl + Return being pressed.
-        if self.button(ids!(send_message_button)).clicked(actions)
+        if self.button(cx, ids!(send_message_button)).clicked(actions)
             || text_input.returned(actions).is_some_and(|(_, m)| m.is_primary())
         {
-            let entered_text = mentionable_text_input.text().trim().to_string();
+            let entered_text = mentionable_text_input.text(cx).trim().to_string();
             if !entered_text.is_empty() {
                 let message = mentionable_text_input.create_message_with_mentions(&entered_text);
                 let replied_to = self.replying_to.take().and_then(|(event_tl_item, _emb)|
@@ -362,15 +353,14 @@ impl RoomInputBar {
                 ..
             }) = text_input.key_down_unhandled(actions) {
                 cx.widget_action(
-                    room_screen_props.room_screen_widget_uid,
-                    &HeapLiveIdPath::default(),
+                    room_screen_props.room_screen_widget_uid, 
                     MessageAction::EditLatest,
                 );
             }
         }
 
         // If the EditingPane has been hidden, handle that.
-        if self.view.editing_pane(ids!(editing_pane)).was_hidden(actions) {
+        if self.view.editing_pane(cx, ids!(editing_pane)).was_hidden(actions) {
             self.on_editing_pane_hidden(cx);
         }
     }
@@ -389,9 +379,9 @@ impl RoomInputBar {
     ) {
         // When the user clicks the reply button next to a message, we need to:
         // 1. Populate and show the ReplyingPreview, of course.
-        let replying_preview = self.view(ids!(replying_preview));
+        let replying_preview = self.view(cx, ids!(replying_preview));
         let (replying_preview_username, _) = replying_preview
-            .avatar(ids!(reply_preview_content.reply_preview_avatar))
+            .avatar(cx, ids!(reply_preview_content.reply_preview_avatar))
             .set_avatar_and_get_username(
                 cx,
                 timeline_kind,
@@ -402,12 +392,12 @@ impl RoomInputBar {
             );
 
         replying_preview
-            .label(ids!(reply_preview_content.reply_preview_username))
+            .label(cx, ids!(reply_preview_content.reply_preview_username))
             .set_text(cx, replying_preview_username.as_str());
 
         populate_preview_of_timeline_item(
             cx,
-            &replying_preview.html_or_plaintext(ids!(reply_preview_content.reply_preview_body)),
+            &replying_preview.html_or_plaintext(cx, ids!(reply_preview_content.reply_preview_body)),
             replying_to.0.content(),
             replying_to.0.sender(),
             &replying_preview_username,
@@ -418,13 +408,13 @@ impl RoomInputBar {
 
         // 2. Hide other views that are irrelevant to a reply, e.g.,
         //    the `EditingPane` would improperly cover up the ReplyPreview.
-        self.editing_pane(ids!(editing_pane)).force_reset_hide(cx);
+        self.editing_pane(cx, ids!(editing_pane)).force_reset_hide(cx);
         self.on_editing_pane_hidden(cx);
         // 3. Automatically focus the keyboard on the message input box
         //    so that the user can immediately start typing their reply
         //    without having to manually click on the message input box.
         if grab_key_focus {
-            self.text_input(ids!(input_bar.mentionable_text_input.text_input)).set_key_focus(cx);
+            self.text_input(cx, ids!(input_bar.mentionable_text_input.text_input)).set_key_focus(cx);
         }
         self.redraw(cx);
     }
@@ -432,7 +422,7 @@ impl RoomInputBar {
     /// Clears (and makes invisible) the preview of the message
     /// that the user is currently replying to.
     fn clear_replying_to(&mut self, cx: &mut Cx) {
-        self.view(ids!(replying_preview)).set_visible(cx, false);
+        self.view(cx, ids!(replying_preview)).set_visible(cx, false);
         self.replying_to = None;
     }
 
@@ -445,17 +435,17 @@ impl RoomInputBar {
     ) {
         // We must hide the input_bar while the editing pane is shown,
         // otherwise a very-tall inputted message might show up underneath a shorter editing pane.
-        self.view.view(ids!(input_bar)).set_visible(cx, false);
+        self.view.view(cx, ids!(input_bar)).set_visible(cx, false);
 
         // Similarly, we must hide the replying preview and location preview,
         // since those are not relevant to editing an existing message,
         // so keeping them visible might confuse the user.
-        let replying_preview = self.view.view(ids!(replying_preview));
+        let replying_preview = self.view.view(cx, ids!(replying_preview));
         self.was_replying_preview_visible = replying_preview.visible();
         replying_preview.set_visible(cx, false);
-        self.view.location_preview(ids!(location_preview)).clear();
+        self.view.location_preview(cx, ids!(location_preview)).clear();
 
-        let editing_pane = self.view.editing_pane(ids!(editing_pane));
+        let editing_pane = self.view.editing_pane(cx, ids!(editing_pane));
         match behavior {
             ShowEditingPaneBehavior::ShowNew { event_tl_item } => {
                 editing_pane.show(cx, event_tl_item, timeline_kind);
@@ -473,9 +463,9 @@ impl RoomInputBar {
         // In `show_editing_pane()` above, we hid the input_bar while the editing pane
         // was being shown, so here we need to make it visible again.
         // Same goes for the replying_preview, if it was previously shown.
-        self.view.view(ids!(input_bar)).set_visible(cx, true);
+        self.view.view(cx, ids!(input_bar)).set_visible(cx, true);
         if self.was_replying_preview_visible && self.replying_to.is_some() {
-            self.view.view(ids!(replying_preview)).set_visible(cx, true);
+            self.view.view(cx, ids!(replying_preview)).set_visible(cx, true);
         }
         self.redraw(cx);
         // We don't need to do anything with the editing pane itself here,
@@ -490,15 +480,15 @@ impl RoomInputBar {
         tombstoned_room_id: &OwnedRoomId,
         successor_room_details: Option<&SuccessorRoomDetails>,
     ) {
-        let tombstone_footer = self.tombstone_footer(ids!(tombstone_footer));
-        let input_bar = self.view(ids!(input_bar));
+        let tombstone_footer = self.tombstone_footer(cx, ids!(tombstone_footer));
+        let input_bar = self.view(cx, ids!(input_bar));
 
         if let Some(srd) = successor_room_details {
             tombstone_footer.show(cx, tombstoned_room_id, srd);
             input_bar.set_visible(cx, false);
         } else {
             tombstone_footer.hide(cx);
-            if !self.editing_pane(ids!(editing_pane)).is_currently_shown(cx) {
+            if !self.editing_pane(cx, ids!(editing_pane)).is_currently_shown(cx) {
                 input_bar.set_visible(cx, true);
             }
         }
@@ -508,21 +498,16 @@ impl RoomInputBar {
     ///
     /// This should be called to update the button state when the message TextInput content changes.
     fn enable_send_message_button(&mut self, cx: &mut Cx, enable: bool) {
-        let send_message_button = self.view.button(ids!(send_message_button));
+        let mut send_message_button = self.view.button(cx, ids!(send_message_button));
         let (fg_color, bg_color) = if enable {
             (COLOR_FG_ACCEPT_GREEN, COLOR_BG_ACCEPT_GREEN)
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
         };
-        send_message_button.apply_over(cx, live! {
-            enabled: (enable),
-            draw_icon: {
-                color: (fg_color),
-                // color_hover: (fg_color),
-            }
-            draw_bg: {
-                color: (bg_color),
-            }
+        script_apply_eval!(cx, send_message_button, {
+            enabled: #(enable),
+            draw_icon.color: #(fg_color),
+            draw_bg.color: #(bg_color),
         });
     }
 
@@ -535,8 +520,8 @@ impl RoomInputBar {
         user_power_levels: UserPowerLevels,
     ) {
         let can_send = user_power_levels.can_send_message();
-        self.view.view(ids!(input_bar)).set_visible(cx, can_send);
-        self.view.view(ids!(can_not_send_message_notice)).set_visible(cx, !can_send);
+        self.view.view(cx, ids!(input_bar)).set_visible(cx, can_send);
+        self.view.view(cx, ids!(can_not_send_message_notice)).set_visible(cx, !can_send);
     }
 
     /// Returns true if the TSP signing checkbox is checked, false otherwise.
@@ -544,7 +529,7 @@ impl RoomInputBar {
     /// If TSP is not enabled, this will always return false.
     #[cfg(feature = "tsp")]
     fn is_tsp_signing_enabled(&self, cx: &mut Cx) -> bool {
-        self.view.check_box(ids!(tsp_sign_checkbox)).active(cx)
+        self.view.check_box(cx, ids!(tsp_sign_checkbox)).active(cx)
     }
 }
 
@@ -608,21 +593,21 @@ impl RoomInputBarRef {
         edit_result: Result<(), matrix_sdk_ui::timeline::Error>,
     ) {
         let Some(inner) = self.borrow_mut() else { return };
-        inner.editing_pane(ids!(editing_pane))
+        inner.editing_pane(cx, ids!(editing_pane))
             .handle_edit_result(cx, timeline_event_item_id, edit_result);
     }
 
     /// Save a snapshot of the UI state of this `RoomInputBar`.
-    pub fn save_state(&self) -> RoomInputBarState {
+    pub fn save_state(&self, cx: &mut Cx) -> RoomInputBarState {
         let Some(inner) = self.borrow() else { return Default::default() };
         // Clear the location preview. We don't save this state because the
         // current location might change by the next time the user opens this same room.
-        inner.location_preview(ids!(location_preview)).clear();
+        inner.location_preview(cx, ids!(location_preview)).clear();
         RoomInputBarState {
             was_replying_preview_visible: inner.was_replying_preview_visible,
             replying_to: inner.replying_to.clone(),
-            editing_pane_state: inner.editing_pane(ids!(editing_pane)).save_state(),
-            text_input_state: inner.text_input(ids!(input_bar.mentionable_text_input.text_input)).save_state(),
+            editing_pane_state: inner.editing_pane(cx, ids!(editing_pane)).save_state(cx),
+            text_input_state: inner.text_input(cx, ids!(input_bar.mentionable_text_input.text_input)).save_state(),
         }
     }
 
@@ -651,7 +636,7 @@ impl RoomInputBarRef {
         inner.update_user_power_levels(cx, user_power_levels);
 
         // 1. Restore the state of the TextInput within the MentionableTextInput.
-        inner.text_input(ids!(input_bar.mentionable_text_input.text_input))
+        inner.text_input(cx, ids!(input_bar.mentionable_text_input.text_input))
             .restore_state(cx, text_input_state);
 
         // 2. Restore the state of the replying-to preview.
@@ -670,7 +655,7 @@ impl RoomInputBarRef {
                 timeline_kind.clone(),
             );
         } else {
-            inner.editing_pane(ids!(editing_pane)).force_reset_hide(cx);
+            inner.editing_pane(cx, ids!(editing_pane)).force_reset_hide(cx);
             inner.on_editing_pane_hidden(cx);
         }
 
diff --git a/src/room/typing_notice.rs b/src/room/typing_notice.rs
index 695f5bbef..5fc00b91e 100644
--- a/src/room/typing_notice.rs
+++ b/src/room/typing_notice.rs
@@ -4,58 +4,55 @@ use makepad_widgets::*;
 
 use crate::shared::bouncing_dots::BouncingDotsWidgetExt;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::bouncing_dots::BouncingDots;
 
-    TYPING_NOTICE_ANIMATION_DURATION_SECS = 0.3
+    mod.widgets.TYPING_NOTICE_ANIMATION_DURATION_SECS = 0.3
+
+    mod.widgets.TypingNotice = set_type_default() do #(TypingNotice::register_widget(vm)) {
+        ..mod.widgets.SolidView
 
-    pub TypingNotice = {{TypingNotice}} {
         visible: false
         width: Fill
         height: 30
         flow: Right
-        padding: {left: 12.0, top: 8.0, bottom: 8.0, right: 10.0}
-        show_bg: true,
-        draw_bg: {
-            color: #e8f4ff,
-        }
+        padding: Inset{left: 12.0, top: 8.0, bottom: 8.0, right: 10.0}
 
-        typing_label = <Label> {
-            align: {x: 0.0, y: 0.5},
-            padding: {left: 5.0, right: 0.0, top: 0.0, bottom: 0.0}
-            draw_text: {
+        show_bg: true
+        draw_bg.color: #e8f4ff
+
+        typing_label := Label {
+            align: Align{x: 0.0, y: 0.5},
+            padding: Inset{left: 5.0, right: 0.0, top: 0.0, bottom: 0.0}
+            draw_text +: {
                 color: (TYPING_NOTICE_TEXT_COLOR),
-                text_style: <REGULAR_TEXT>{font_size: 9}
+                text_style: REGULAR_TEXT {font_size: 9}
             }
             text: "Someone is typing"
         }
 
-        bouncing_dots = <BouncingDots> {
-            margin: {top: 1.1, left: -4 }
+        bouncing_dots := BouncingDots {
+            margin: Inset{top: 1.1, left: -4 }
             padding: 0.0,
-            draw_bg: {
-                color: (TYPING_NOTICE_TEXT_COLOR),
+            draw_bg +: {
+                color: instance((TYPING_NOTICE_TEXT_COLOR)),
             }
         }
 
 
-        animator: {
-            typing_notice_animator = {
-                default: show,
-                show = {
+        animator: Animator{
+            typing_notice_animator: {
+                default: @show
+                show: AnimatorState{
                     redraw: true,
-                    from: { all: Forward { duration: (TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (mod.widgets.TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
                     apply: { height: 30 }
                 }
-                hide = {
+                hide: AnimatorState{
                     redraw: true,
-                    from: { all: Forward { duration: (TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (mod.widgets.TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
                     apply: { height: 0 }
                 }
             }
@@ -64,8 +61,9 @@ live_design! {
 }
 
 /// A notice that slides into view when someone is typing.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct TypingNotice {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 }
@@ -90,7 +88,7 @@ impl TypingNotice {
             [] => {
                 // Animate out the typing notice view (sliding it out towards the bottom).
                 self.animator_play(cx, ids!(typing_notice_animator.hide));
-                self.view.bouncing_dots(ids!(bouncing_dots)).stop_animation(cx);
+                self.view.bouncing_dots(cx, ids!(bouncing_dots)).stop_animation(cx);
                 return;
             }
             [user] => format!("{user} is typing "),
@@ -107,12 +105,12 @@ impl TypingNotice {
             }
         };
         // Set the typing notice text and make its view visible.
-        self.view.label(ids!(typing_label)).set_text(cx, &typing_notice_text);
+        self.view.label(cx, ids!(typing_label)).set_text(cx, &typing_notice_text);
         self.view.set_visible(cx, true);
         // Animate in the typing notice view (sliding it up from the bottom).
         self.animator_play(cx, ids!(typing_notice_animator.show));
         // Start the typing notice text animation of bouncing dots.
-        self.view.bouncing_dots(ids!(bouncing_dots)).start_animation(cx);
+        self.view.bouncing_dots(cx, ids!(bouncing_dots)).start_animation(cx);
     }
 }
 
diff --git a/src/settings/account_settings.rs b/src/settings/account_settings.rs
index d1ed396cd..7a2f2d189 100644
--- a/src/settings/account_settings.rs
+++ b/src/settings/account_settings.rs
@@ -1,276 +1,276 @@
 use std::cell::RefCell;
 
 use makepad_widgets::{text::selection::Cursor, *};
+use crate::ApplyOverCompat;
 
-use crate::{app::ConfirmDeleteAction, avatar_cache::{self}, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction}, profile::user_profile::UserProfile, shared::{avatar::{AvatarState, AvatarWidgetExt}, callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, confirmation_modal::ConfirmationModalContent, popup_list::{PopupKind, enqueue_popup_notification}, styles::*}, sliding_sync::{AccountDataAction, MatrixRequest, submit_async_request}, utils};
+use crate::{app::ConfirmDeleteAction, avatar_cache::{self}, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction}, profile::user_profile::UserProfile, shared::{avatar::{AvatarState, AvatarWidgetExt}, confirmation_modal::ConfirmationModalContent, popup_list::{PopupKind, enqueue_popup_notification}, styles::*}, sliding_sync::{AccountDataAction, MatrixRequest, submit_async_request}, utils};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
     // The view containing all user account-related settings.
-    pub AccountSettings = {{AccountSettings}} {
+    mod.widgets.AccountSettings = #(AccountSettings::register_widget(vm)) {
         width: Fill, height: Fit
         flow: Down
 
-        <TitleLabel> {
+        TitleLabel {
             text: "Account Settings"
         }
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Your Avatar:"
         }
 
-        <View> {
+        View {
             width: Fill, height: Fit
             // TODO: I'd like to use RightWrap here, but Makepad doesn't yet
-            //       support RightWrap with align: {y: 0.5}.
+            //       support RightWrap with align: Align{y: 0.5}.
             flow: Right,
-            align: {y: 0.5}
+            align: Align{y: 0.5}
 
-            our_own_avatar = <Avatar> {
+            our_own_avatar := Avatar {
                 width: 100,
                 height: 100,
                 margin: 10,
-                text_view = { text = { draw_text: {
-                    text_style: { font_size: 35.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: theme.font_regular { font_size: 35.0 }
+                        }
+                    }
+                }
             }
 
-            <View> {
+            View {
                 width: Fit, height: Fit
                 flow: Down,
-                align: {y: 0.5}
-                padding: { left: 10, right: 10 }
+                align: Align{y: 0.5}
+                padding: Inset{ left: 10, right: 10 }
                 spacing: 10
 
-                <View> {
+                View {
                     width: Fit, height: Fit
                     flow: Right,
-                    align: {y: 0.5}
+                    align: Align{y: 0.5}
                     spacing: 10
 
-                    upload_avatar_button = <RobrixIconButton> {
+                    upload_avatar_button := RobrixIconButton {
                         width: 140,
-                        padding: {top: 10, bottom: 10, left: 12, right: 15}
+                        padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
                         margin: 0,
-                        draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY)
+                        draw_bg +: {
+                            color: instance((COLOR_ACTIVE_PRIMARY))
                         }
-                        draw_icon: {
-                            svg_file: (ICON_UPLOAD)
+                        draw_icon +: {
+                            svg: (ICON_UPLOAD)
                             color: (COLOR_PRIMARY)
                         }
-                        draw_text: {
+                        draw_text +: {
                             color: (COLOR_PRIMARY)
-                            text_style: <REGULAR_TEXT> {}
+                            text_style: REGULAR_TEXT {}
                         }
-                        icon_walk: {width: 16, height: 16}
+                        icon_walk: Walk{width: 16, height: 16}
                         text: "Upload Avatar"
                     }
 
-                    upload_avatar_spinner = <LoadingSpinner> {
+                    upload_avatar_spinner := LoadingSpinner {
                         width: 16, height: 16
                         visible: false
-                        draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY)
+                        draw_bg +: {
+                            color: instance((COLOR_ACTIVE_PRIMARY))
                         }
                     }
                 }
 
-                <View> {
+                View {
                     width: Fit, height: Fit
                     flow: Right,
-                    align: {y: 0.5}
+                    align: Align{y: 0.5}
                     spacing: 10
 
-                    delete_avatar_button = <RobrixIconButton> {
+                    delete_avatar_button := RobrixIconButton {
                         width: 140,
-                        padding: {top: 10, bottom: 10, left: 12, right: 15}
+                        padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
                         margin: 0,
-                        draw_bg: {
-                            color: (COLOR_BG_DANGER_RED)
-                            border_color: (COLOR_FG_DANGER_RED)
+                        draw_bg +: {
+                            color: instance((COLOR_BG_DANGER_RED))
+                            border_color: instance((COLOR_FG_DANGER_RED))
                         }
-                        draw_icon: {
-                            svg_file: (ICON_TRASH),
+                        draw_icon +: {
+                            svg: (ICON_TRASH),
                             color: (COLOR_FG_DANGER_RED),
                         }
-                        draw_text: {
+                        draw_text +: {
                             color: (COLOR_FG_DANGER_RED),
                         }
-                        icon_walk: { width: 16, height: 16 }
+                        icon_walk: Walk{ width: 16, height: 16 }
                         text: "Delete Avatar"
                     }
 
-                    delete_avatar_spinner = <LoadingSpinner> {
+                    delete_avatar_spinner := LoadingSpinner {
                         width: 16, height: 16
                         visible: false
-                        draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY)
+                        draw_bg +: {
+                            color: instance((COLOR_ACTIVE_PRIMARY))
                         }
                     }
                 }
             }
         }
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Your Display Name:"
         }
 
-        display_name_input = <SimpleTextInput> {
-            margin: {top: 3, left: 5, right: 5, bottom: 8},
+        display_name_input := SimpleTextInput {
+            margin: Inset{top: 3, left: 5, right: 5, bottom: 8},
             width: 216, height: Fit
             empty_text: "Add a display name..."
         }
 
-        <View> {
+        View {
             width: Fill, height: Fit
-            flow: RightWrap,
-            align: {y: 0.5},
+            flow: Flow.Right{wrap: true},
+            align: Align{y: 0.5},
             spacing: 10
 
             // These buttons are disabled by default, and enabled when the user
             // changes the `display_name_input` text.
-            cancel_display_name_button = <RobrixIconButton> {
+            cancel_display_name_button := RobrixIconButton {
                 enabled: false,
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: {left: 5},
+                margin: Inset{left: 5},
 
-                draw_bg: {
-                    color: (COLOR_BG_DISABLED)
+                draw_bg +: {
+                    color: instance((COLOR_BG_DISABLED))
                 }
-                draw_icon: {
-                    svg_file: (ICON_FORBIDDEN),
+                draw_icon +: {
+                    svg: (ICON_FORBIDDEN),
                     color: (COLOR_FG_DISABLED)
                 }
-                icon_walk: {width: 16, height: 16, margin: 0}
-                draw_text: {
+                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                draw_text +: {
                     color: (COLOR_FG_DISABLED),
                 }
                 text: "Cancel"
             }
 
-            accept_display_name_button = <RobrixIconButton> {
+            accept_display_name_button := RobrixIconButton {
                 enabled: false,
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: {left: 5},
+                margin: Inset{left: 5},
 
-                draw_bg: {
-                    border_color: (COLOR_FG_DISABLED),
-                    color: (COLOR_BG_DISABLED),
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_DISABLED)),
+                    color: instance((COLOR_BG_DISABLED)),
                     border_radius: 5
                 }
-                draw_icon: {
-                    svg_file: (ICON_CHECKMARK)
+                draw_icon +: {
+                    svg: (ICON_CHECKMARK)
                     color: (COLOR_FG_DISABLED),
                 }
-                icon_walk: {width: 16, height: 16, margin: 0}
-                draw_text: {
+                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                draw_text +: {
                     color: (COLOR_FG_DISABLED),
                 }
                 text: "Save Name"
             }
 
-            save_name_spinner = <LoadingSpinner> {
+            save_name_spinner := LoadingSpinner {
                 width: 16, height: 16
-                margin: {left: 5, top: 13} // vertically center with buttons
+                margin: Inset{left: 5, top: 13} // vertically center with buttons
                 visible: false
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
             }
         }
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Your User ID:"
         }
 
-        <View> {
+        View {
             width: Fill, height: Fit
             flow: Right,
             spacing: 10
 
-            copy_user_id_button = <RobrixIconButton> {
+            copy_user_id_button := RobrixIconButton {
                 enable_long_press: true,
-                margin: {left: 5}
+                margin: Inset{left: 5}
                 padding: 12,
                 spacing: 0,
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_COPY)
+                draw_icon +: {
+                    svg: (ICON_COPY)
                 }
-                icon_walk: {width: 16, height: 16, margin: {right: -2} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{right: -2} }
             }
 
-            user_id = <Label> {
+            user_id := Label {
                 width: Fill, height: Fit
-                flow: RightWrap,
-                margin: {top: 10}
-                draw_text: {
+                flow: Flow.Right{wrap: true},
+                margin: Inset{top: 10}
+                draw_text +: {
                     wrap: Line,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
                 text: "You are not logged in."
             }
         }
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Other actions:"
         }
 
-        <View> {
-            // margin: {top: 20},
+        View {
+            // margin: Inset{top: 20},
             width: Fill, height: Fit
-            flow: RightWrap,
-            align: {y: 0.5},
+            flow: Flow.Right{wrap: true},
+            align: Align{y: 0.5},
             spacing: 10
 
-            manage_account_button = <RobrixIconButton> {
+            manage_account_button := RobrixIconButton {
                 
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                margin: {left: 5}
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                margin: Inset{left: 5}
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_EXTERNAL_LINK)
+                draw_icon +: {
+                    svg: (ICON_EXTERNAL_LINK)
                     color: (COLOR_PRIMARY)
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_PRIMARY)
-                    text_style: <REGULAR_TEXT> {}
+                    text_style: REGULAR_TEXT {}
                 }
-                icon_walk: {width: 16, height: 16}
+                icon_walk: Walk{width: 16, height: 16}
                 text: "Manage Account"
             }
 
-            logout_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                margin: {left: 5}
-                draw_bg: {
-                    color: (COLOR_BG_DANGER_RED)
-                    border_color: (COLOR_FG_DANGER_RED)
+            logout_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                margin: Inset{left: 5}
+                draw_bg +: {
+                    color: instance((COLOR_BG_DANGER_RED))
+                    border_color: instance((COLOR_FG_DANGER_RED))
                 }
-                draw_icon: {
-                    svg_file: (ICON_LOGOUT),
+                draw_icon +: {
+                    svg: (ICON_LOGOUT),
                     color: (COLOR_FG_DANGER_RED),
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
-                icon_walk: { width: 16, height: 16, margin: {right: -2} }
+                icon_walk: Walk{ width: 16, height: 16, margin: Inset{right: -2} }
                 text: "Log out"
             }
         }
@@ -278,7 +278,7 @@ live_design! {
 }
 
 /// The view containing all user account-related settings.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct AccountSettings {
     #[deref] view: View,
 
@@ -289,13 +289,12 @@ impl Widget for AccountSettings {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.match_event(cx, event);
 
-        let copy_user_id_button = self.view.button(ids!(copy_user_id_button));
+        let copy_user_id_button = self.view.button(cx, ids!(copy_user_id_button));
         let copy_user_id_button_area = copy_user_id_button.area();
         match event.hits(cx, copy_user_id_button_area) {
             Hit::FingerHoverIn(_) | Hit::FingerLongPress(_) => {
                 cx.widget_action(
-                    copy_user_id_button.widget_uid(),
-                    &scope.path,
+                    copy_user_id_button.widget_uid(), 
                     TooltipAction::HoverIn {
                         text: "Copy User ID".to_string(),
                         widget_rect: copy_user_id_button_area.rect(cx),
@@ -308,8 +307,7 @@ impl Widget for AccountSettings {
             }
             Hit::FingerHoverOut(_) => {
                 cx.widget_action(
-                    copy_user_id_button.widget_uid(),
-                    &scope.path,
+                    copy_user_id_button.widget_uid(), 
                     TooltipAction::HoverOut,
                 );
             }
@@ -337,16 +335,16 @@ impl MatchEvent for AccountSettings {
     }
 
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let accept_display_name_button = self.view.button(ids!(accept_display_name_button));
-        let cancel_display_name_button = self.view.button(ids!(cancel_display_name_button));
-        let display_name_input = self.view.text_input(ids!(display_name_input));
-        let delete_avatar_button = self.view.button(ids!(delete_avatar_button));
-        let upload_avatar_button = self.view.button(ids!(upload_avatar_button));
+        let accept_display_name_button = self.view.button(cx, ids!(accept_display_name_button));
+        let cancel_display_name_button = self.view.button(cx, ids!(cancel_display_name_button));
+        let display_name_input = self.view.text_input(cx, ids!(display_name_input));
+        let delete_avatar_button = self.view.button(cx, ids!(delete_avatar_button));
+        let upload_avatar_button = self.view.button(cx, ids!(upload_avatar_button));
 
         for action in actions {
             // Handle LogoutAction::InProgress to update button state
             if let Some(LogoutAction::InProgress(is_in_progress)) = action.downcast_ref() {
-                let logout_button = self.view.button(ids!(logout_button));
+                let logout_button = self.view.button(cx, ids!(logout_button));
                 logout_button.set_text(cx, if *is_in_progress { "Logging out..." } else { "Log out" });
                 logout_button.set_enabled(cx, !*is_in_progress);
                 logout_button.reset_hover(cx);
@@ -358,8 +356,8 @@ impl MatchEvent for AccountSettings {
             // so here, we only need to update this widget's local profile info.
             match action.downcast_ref() {
                 Some(AccountDataAction::AvatarChanged(new_avatar_url)) => {
-                    self.view.widget(ids!(upload_avatar_spinner)).set_visible(cx, false);
-                    self.view.widget(ids!(delete_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(cx, ids!(upload_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(cx, ids!(delete_avatar_spinner)).set_visible(cx, false);
                     // Update our cached profile with the new avatar URL
                     if let Some(profile) = self.own_profile.as_mut() {
                         profile.avatar_state = AvatarState::Known(new_avatar_url.clone());
@@ -374,8 +372,8 @@ impl MatchEvent for AccountSettings {
                     continue;
                 }
                 Some(AccountDataAction::AvatarChangeFailed(err_msg)) => {
-                    self.view.widget(ids!(upload_avatar_spinner)).set_visible(cx, false);
-                    self.view.widget(ids!(delete_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(cx, ids!(upload_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(cx, ids!(delete_avatar_spinner)).set_visible(cx, false);
                     // Re-enable the avatar buttons so user can try again
                     Self::enable_upload_avatar_button(cx, true, &upload_avatar_button);
                     Self::enable_delete_avatar_button(
@@ -391,7 +389,7 @@ impl MatchEvent for AccountSettings {
                     continue;
                 }
                 Some(AccountDataAction::DisplayNameChanged(new_name)) => {
-                    self.view.widget(ids!(save_name_spinner)).set_visible(cx, false);
+                    self.view.widget(cx, ids!(save_name_spinner)).set_visible(cx, false);
                     // Update our cached profile with the new display name
                     if let Some(profile) = self.own_profile.as_mut() {
                         profile.username = new_name.clone();
@@ -411,7 +409,7 @@ impl MatchEvent for AccountSettings {
                     continue;
                 }
                 Some(AccountDataAction::DisplayNameChangeFailed(err_msg)) => {
-                    self.view.widget(ids!(save_name_spinner)).set_visible(cx, false);
+                    self.view.widget(cx, ids!(save_name_spinner)).set_visible(cx, false);
                     // Re-enable the buttons and text input so that the user can try again
                     display_name_input.set_is_read_only(cx, false);
                     display_name_input.set_disabled(cx, false);
@@ -428,13 +426,13 @@ impl MatchEvent for AccountSettings {
 
             match action.downcast_ref() {
                 Some(AccountSettingsAction::AvatarDeleteStarted) => {
-                    self.view.widget(ids!(delete_avatar_spinner)).set_visible(cx, true);
+                    self.view.widget(cx, ids!(delete_avatar_spinner)).set_visible(cx, true);
                     Self::enable_upload_avatar_button(cx, false, &upload_avatar_button);
                     Self::enable_delete_avatar_button(cx, false, &delete_avatar_button);
                     continue;
                 }
                 Some(AccountSettingsAction::AvatarUploadStarted) => {
-                    self.view.widget(ids!(upload_avatar_spinner)).set_visible(cx, true);
+                    self.view.widget(cx, ids!(upload_avatar_spinner)).set_visible(cx, true);
                     Self::enable_upload_avatar_button(cx, false, &upload_avatar_button);
                     Self::enable_delete_avatar_button(cx, false, &delete_avatar_button);
                     continue;
@@ -501,7 +499,7 @@ impl MatchEvent for AccountSettings {
             };
             // While the request is in flight, show the loading spinner and disable the buttons & text input
             submit_async_request(MatrixRequest::SetDisplayName { new_display_name });
-            self.view.widget(ids!(save_name_spinner)).set_visible(cx, true);
+            self.view.widget(cx, ids!(save_name_spinner)).set_visible(cx, true);
             display_name_input.set_disabled(cx, true);
             display_name_input.set_is_read_only(cx, true);
             Self::enable_display_name_buttons(cx, false, &accept_display_name_button, &cancel_display_name_button);
@@ -512,7 +510,7 @@ impl MatchEvent for AccountSettings {
             );
         }
 
-        if self.view.button(ids!(copy_user_id_button)).clicked(actions) {
+        if self.view.button(cx, ids!(copy_user_id_button)).clicked(actions) {
             cx.copy_to_clipboard(own_profile.user_id.as_str());
             enqueue_popup_notification(
                 "Copied your User ID to the clipboard.",
@@ -521,7 +519,7 @@ impl MatchEvent for AccountSettings {
             );
         }
 
-        if self.view.button(ids!(manage_account_button)).clicked(actions) {
+        if self.view.button(cx, ids!(manage_account_button)).clicked(actions) {
             // TODO: support opening the user's account management page in a browser,
             //       or perhaps in an in-app pane if that's what is needed for regular UN+PW login.
             enqueue_popup_notification(
@@ -531,7 +529,7 @@ impl MatchEvent for AccountSettings {
             );
         }
 
-        if self.view.button(ids!(logout_button)).clicked(actions) {
+        if self.view.button(cx, ids!(logout_button)).clicked(actions) {
             cx.action(LogoutConfirmModalAction::Open);
         }
     }
@@ -547,7 +545,7 @@ impl AccountSettings {
             return;
         };
 
-        let our_own_avatar = self.view.avatar(ids!(our_own_avatar));
+        let our_own_avatar = self.view.avatar(cx, ids!(our_own_avatar));
         let mut drew_avatar = false;
         if let Some(avatar_img_data) = own_profile.avatar_state.data() {
             drew_avatar = our_own_avatar.show_image(
@@ -568,38 +566,38 @@ impl AccountSettings {
         Self::enable_upload_avatar_button(
             cx,
             true,
-            &self.view.button(ids!(upload_avatar_button))
+            &self.view.button(cx, ids!(upload_avatar_button))
         );
         Self::enable_delete_avatar_button(
             cx,
             own_profile.avatar_state.has_avatar(),
-            &self.view.button(ids!(delete_avatar_button))
+            &self.view.button(cx, ids!(delete_avatar_button))
         );
     }
 
     /// Show and initializes the account settings within the SettingsScreen.
     pub fn populate(&mut self, cx: &mut Cx, own_profile: UserProfile) {
-        self.view.label(ids!(user_id))
+        self.view.label(cx, ids!(user_id))
             .set_text(cx, own_profile.user_id.as_str());
-        self.view.text_input(ids!(display_name_input))
+        self.view.text_input(cx, ids!(display_name_input))
             .set_text(cx, own_profile.username.as_deref().unwrap_or_default());
         Self::enable_display_name_buttons(
             cx,
             false,
-            &self.view.button(ids!(accept_display_name_button)),
-            &self.view.button(ids!(cancel_display_name_button)),
+            &self.view.button(cx, ids!(accept_display_name_button)),
+            &self.view.button(cx, ids!(cancel_display_name_button)),
         );
 
         self.own_profile = Some(own_profile);
         self.populate_avatar_views(cx);
 
-        self.view.button(ids!(upload_avatar_button)).reset_hover(cx);
-        self.view.button(ids!(delete_avatar_button)).reset_hover(cx);
-        self.view.button(ids!(accept_display_name_button)).reset_hover(cx);
-        self.view.button(ids!(cancel_display_name_button)).reset_hover(cx);
-        self.view.button(ids!(copy_user_id_button)).reset_hover(cx);
-        self.view.button(ids!(manage_account_button)).reset_hover(cx);
-        self.view.button(ids!(logout_button)).reset_hover(cx);
+        self.view.button(cx, ids!(upload_avatar_button)).reset_hover(cx);
+        self.view.button(cx, ids!(delete_avatar_button)).reset_hover(cx);
+        self.view.button(cx, ids!(accept_display_name_button)).reset_hover(cx);
+        self.view.button(cx, ids!(cancel_display_name_button)).reset_hover(cx);
+        self.view.button(cx, ids!(copy_user_id_button)).reset_hover(cx);
+        self.view.button(cx, ids!(manage_account_button)).reset_hover(cx);
+        self.view.button(cx, ids!(logout_button)).reset_hover(cx);
         self.view.redraw(cx);
     }
 
@@ -609,7 +607,7 @@ impl AccountSettings {
         enable: bool,
         delete_avatar_button: &ButtonRef,
     ) {
-        let (delete_button_fg_color, delete_button_bg_color) = if enable {
+        let (_delete_button_fg_color, _delete_button_bg_color) = if enable {
             (COLOR_FG_DANGER_RED, COLOR_BG_DANGER_RED)
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
@@ -617,8 +615,8 @@ impl AccountSettings {
         delete_avatar_button.apply_over(cx, live!{
             enabled: (enable),
             draw_bg: {
-                color: (delete_button_bg_color),
-                border_color: (delete_button_fg_color),
+                color: instance((delete_button_bg_color)),
+                border_color: instance((delete_button_fg_color)),
             }
             draw_icon: {
                 color: (delete_button_fg_color),
@@ -635,7 +633,7 @@ impl AccountSettings {
         enable: bool,
         upload_avatar_button: &ButtonRef,
     ) {
-        let (upload_button_fg_color, upload_button_bg_color) = if enable {
+        let (_upload_button_fg_color, _upload_button_bg_color) = if enable {
             (COLOR_PRIMARY, COLOR_ACTIVE_PRIMARY)
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
@@ -643,8 +641,8 @@ impl AccountSettings {
         upload_avatar_button.apply_over(cx, live!{
             enabled: (enable),
             draw_bg: {
-                color: (upload_button_bg_color),
-                border_color: (upload_button_fg_color),
+                color: instance((upload_button_bg_color)),
+                border_color: instance((upload_button_fg_color)),
             }
             draw_icon: {
                 color: (upload_button_fg_color),
@@ -662,12 +660,12 @@ impl AccountSettings {
         accept_display_name_button: &ButtonRef,
         cancel_display_name_button: &ButtonRef,
     ) {
-        let (accept_button_fg_color, accept_button_bg_color) = if enable {
+        let (_accept_button_fg_color, _accept_button_bg_color) = if enable {
             (COLOR_FG_ACCEPT_GREEN, COLOR_BG_ACCEPT_GREEN)
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
         };
-        let (cancel_button_fg_color, cancel_button_bg_color) = if enable {
+        let (_cancel_button_fg_color, _cancel_button_bg_color) = if enable {
             (COLOR_FG_DANGER_RED, COLOR_BG_DANGER_RED)
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
@@ -676,8 +674,8 @@ impl AccountSettings {
         accept_display_name_button.apply_over(cx, live!(
             enabled: (enable),
             draw_bg: {
-                color: (accept_button_bg_color),
-                border_color: (accept_button_fg_color),
+                color: instance((accept_button_bg_color)),
+                border_color: instance((accept_button_fg_color)),
             },
             draw_text: {
                 color: (accept_button_fg_color),
@@ -689,8 +687,8 @@ impl AccountSettings {
         cancel_display_name_button.apply_over(cx, live!(
             enabled: (enable),
             draw_bg: {
-                color: (cancel_button_bg_color),
-                border_color: (cancel_button_fg_color),
+                color: instance((cancel_button_bg_color)),
+                border_color: instance((cancel_button_fg_color)),
             },
             draw_text: {
                 color: (cancel_button_fg_color),
diff --git a/src/settings/mod.rs b/src/settings/mod.rs
index 0c0361d74..579bf0849 100644
--- a/src/settings/mod.rs
+++ b/src/settings/mod.rs
@@ -1,9 +1,9 @@
-use makepad_widgets::Cx;
+use makepad_widgets::ScriptVm;
 
 pub mod settings_screen;
 pub mod account_settings;
 
-pub fn live_design(cx: &mut Cx) {
-    account_settings::live_design(cx);
-    settings_screen::live_design(cx);
+pub fn script_mod(vm: &mut ScriptVm) {
+    account_settings::script_mod(vm);
+    settings_screen::script_mod(vm);
 }
diff --git a/src/settings/settings_screen.rs b/src/settings/settings_screen.rs
index 438f16125..3ec850550 100644
--- a/src/settings/settings_screen.rs
+++ b/src/settings/settings_screen.rs
@@ -3,82 +3,74 @@ use makepad_widgets::*;
 
 use crate::{home::navigation_tab_bar::{NavigationBarAction, get_own_profile}, profile::user_profile::UserProfile, settings::account_settings::AccountSettingsWidgetExt};
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::*;
-    use crate::settings::account_settings::AccountSettings;
-    use link::tsp_link::TspSettingsScreen;
-    use link::tsp_link::CreateWalletModal;
-    use link::tsp_link::CreateDidModal;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
 
     // The main, top-level settings screen widget.
-    pub SettingsScreen = {{SettingsScreen}} {
+    mod.widgets.SettingsScreen = #(SettingsScreen::register_widget(vm)) {
         width: Fill, height: Fill,
         flow: Overlay
 
-        <View> {
-            padding: {top: 5, left: 15, right: 15, bottom: 0},
+        View {
+            padding: Inset{top: 5, left: 15, right: 15, bottom: 0},
             flow: Down
 
             // The settings header shows a title, with a close button to the right.
-            settings_header = <View> {
+            settings_header := View {
                 flow: Right,
-                align: {x: 1.0, y: 0.5},
+                align: Align{x: 1.0, y: 0.5},
                 width: Fill, height: Fit
-                margin: {left: 5, right: 5}
+                margin: Inset{left: 5, right: 5}
                 spacing: 10,
 
-                settings_header_title = <TitleLabel> {
-                    margin: {top: 4} // line up with the close button
+                settings_header_title := TitleLabel {
+                    margin: Inset{top: 4} // line up with the close button
                     text: "All Settings"
-                    draw_text: {
-                        text_style: {font_size: 18},
+                    draw_text +: {
+                        text_style: theme.font_regular {font_size: 18},
                     }
                 }
 
                 // The "X" close button on the top right
-                close_button = <RobrixIconButton> {
+                close_button := RobrixIconButton {
                     width: Fit,
                     height: Fit,
-                    align: {x: 1.0, y: 0.0},
+                    align: Align{x: 1.0, y: 0.0},
                     spacing: 0,
-                    margin: {top: 4.5} // vertically align with the title
+                    margin: Inset{top: 4.5} // vertically align with the title
                     padding: 15,
 
-                    draw_bg: {
-                        color: (COLOR_SECONDARY)
+                    draw_bg +: {
+                        color: instance((COLOR_SECONDARY))
                     }
-                    draw_icon: {
-                        svg_file: (ICON_CLOSE),
-                        fn get_color(self) -> vec4 {
+                    draw_icon +: {
+                        svg: (ICON_CLOSE),
+                        get_color: fn() -> vec4 {
                             return #x0;
                         }
                     }
-                    icon_walk: {width: 14, height: 14}
+                    icon_walk: Walk{width: 14, height: 14}
                 }
             }
 
             // Make sure the dividing line is aligned with the close_button
-            <LineH> { padding: 10, margin: {top: 10, right: 2} }
+            LineH { padding: 10, margin: Inset{top: 10, right: 2} }
 
-            <ScrollXYView> {
+            ScrollXYView {
                 width: Fill, height: Fill
                 flow: Down
 
                 // The account settings section.
-                account_settings = <AccountSettings> {}
+                account_settings := AccountSettings {}
 
-                <LineH> { width: 400, padding: 10, margin: {top: 20, bottom: 5} }
+                LineH { width: 400, padding: 10, margin: Inset{top: 20, bottom: 5} }
 
                 // The TSP wallet settings section.
-                tsp_settings_screen = <TspSettingsScreen> {}
+                tsp_settings_screen := TspSettingsScreen {}
 
-                <LineH> { width: 400, padding: 10, margin: {top: 20, bottom: 5} }
+                LineH { width: 400, padding: 10, margin: Inset{top: 20, bottom: 5} }
 
                 // Add other settings sections here as needed.
                 // Don't forget to add a `show()` fn to those settings sections
@@ -87,15 +79,15 @@ live_design! {
         }
 
         // We want all modals to appear in front of the settings screen.
-        create_wallet_modal = <Modal> {
-            content: {
-                create_wallet_modal_inner = <CreateWalletModal> {}
+        create_wallet_modal := Modal {
+            content +: {
+                create_wallet_modal_inner := CreateWalletModal {}
             }
         }
 
-        create_did_modal = <Modal> {
-            content: {
-                create_did_modal_inner = <CreateDidModal> {}
+        create_did_modal := Modal {
+            content +: {
+                create_did_modal_inner := CreateDidModal {}
             }
         }
     }
@@ -103,7 +95,7 @@ live_design! {
 
 
 /// The top-level widget showing all app and user settings/preferences.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct SettingsScreen {
     #[deref] view: View,
 }
@@ -121,7 +113,7 @@ impl Widget for SettingsScreen {
         let close_pane = {
             matches!(
                 event,
-                Event::Actions(actions) if self.button(ids!(close_button)).clicked(actions)
+                Event::Actions(actions) if self.button(cx, ids!(close_button)).clicked(actions)
             )
             || event.back_pressed()
             || match event.hits(cx, area) {
@@ -149,11 +141,11 @@ impl Widget for SettingsScreen {
                 match action.downcast_ref() {
                     Some(CreateWalletModalAction::Open) => {
                         use crate::tsp::create_wallet_modal::CreateWalletModalWidgetExt;
-                        self.view.create_wallet_modal(ids!(create_wallet_modal_inner)).show(cx);
-                        self.view.modal(ids!(create_wallet_modal)).open(cx);
+                        self.view.create_wallet_modal(cx, ids!(create_wallet_modal_inner)).show(cx);
+                        self.view.modal(cx, ids!(create_wallet_modal)).open(cx);
                     }
                     Some(CreateWalletModalAction::Close) => {
-                        self.view.modal(ids!(create_wallet_modal)).close(cx);
+                        self.view.modal(cx, ids!(create_wallet_modal)).close(cx);
                     }
                     None => { }
                 }
@@ -162,11 +154,11 @@ impl Widget for SettingsScreen {
                 match action.downcast_ref() {
                     Some(CreateDidModalAction::Open) => {
                         use crate::tsp::create_did_modal::CreateDidModalWidgetExt;
-                        self.view.create_did_modal(ids!(create_did_modal_inner)).show(cx);
-                        self.view.modal(ids!(create_did_modal)).open(cx);
+                        self.view.create_did_modal(cx, ids!(create_did_modal_inner)).show(cx);
+                        self.view.modal(cx, ids!(create_did_modal)).open(cx);
                     }
                     Some(CreateDidModalAction::Close) => {
-                        self.view.modal(ids!(create_did_modal)).close(cx);
+                        self.view.modal(cx, ids!(create_did_modal)).close(cx);
                     }
                     None => { }
                 }
@@ -186,8 +178,8 @@ impl SettingsScreen {
             error!("Failed to get own profile for settings screen.");
             return;
         };
-        self.view.account_settings(ids!(account_settings)).populate(cx, profile);
-        self.view.button(ids!(close_button)).reset_hover(cx);
+        self.view.account_settings(cx, ids!(account_settings)).populate(cx, profile);
+        self.view.button(cx, ids!(close_button)).reset_hover(cx);
         cx.set_key_focus(self.view.area());
         self.redraw(cx);
     }
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 6d7e57785..e4b8bb102 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -20,67 +20,56 @@ use crate::{
     utils,
 };
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-
-    IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
 
     // An avatar view holds either an image thumbnail or a single character of text.
     // By default, the text label is visible, but can be replaced by an image
     // once it is available.
     //
     // The Avatar view (either text or image) is masked by a circle.
-    pub Avatar = {{Avatar}} {
+    mod.widgets.Avatar = #(Avatar::register_widget(vm)) {
         width: 36.0,
         height: 36.0,
         // centered horizontally and vertically.
-        align: { x: 0.5, y: 0.5 }
+        align: Align{ x: 0.5, y: 0.5 }
         // the text_view and img_view are overlaid on top of each other.
         flow: Overlay,
 
-        text_view = <View> {
+        // TODO: use PageFlip to switch between text and image instead of an overlay.
+
+        text_view := CircleView {
             visible: true,
-            align: { x: 0.5, y: 0.5 }
+            align: Align { x: 0.5, y: 0.5 }
             show_bg: true,
-            draw_bg: {
-                uniform background_color: (COLOR_AVATAR_BG)
-
-                fn pixel(self) -> vec4 {
-                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                    let c = self.rect_size * 0.5;
-                    sdf.circle(c.x, c.x, c.x)
-                    sdf.fill_keep(self.background_color);
-                    return sdf.result
-                }
-            }
+            draw_bg.color: (COLOR_AVATAR_BG)
 
-            text = <Label> {
+            text := Label {
                 padding: 0,
+                margin: 0,
                 width: Fit, height: Fit,
                 flow: Right, // do not wrap
-                draw_text: {
-                    text_style: <TITLE_TEXT>{ font_size: 15. }
+                align: Align{ x: 0.5, y: 0.5 }
+                draw_text +: {
+                    text_style: TITLE_TEXT { font_size: 15. }
                     color: #f,
                 }
                 text: "?"
             }
         }
 
-        img_view = <View> {
+        img_view := CircleView {
             visible: false,
-            align: { x: 0.5, y: 0.5 }
-            img = <Image> {
-                fit: Stretch,
+            align: Align { x: 0.5, y: 0.5 }
+            img := Image {
+                fit: ImageFit.Stretch,
                 width: Fill, height: Fill,
-                source: (IMG_DEFAULT_AVATAR),
-                draw_bg: {
-                    fn pixel(self) -> vec4 {
+                draw_bg +: {
+                    pixel: fn() {
                         let maxed = max(self.rect_size.x, self.rect_size.y);
-                        let sdf = Sdf2d::viewport(self.pos * vec2(maxed, maxed));
+                        let sdf = Sdf2d.viewport(self.pos * vec2(maxed, maxed));
                         let r = maxed * 0.5;
                         sdf.circle(r, r, r);
                         sdf.fill_keep(self.get_color());
@@ -93,8 +82,9 @@ live_design! {
 }
 
 
-#[derive(LiveHook, Live, Widget)]
+#[derive(ScriptHook, Script, Widget)]
 pub struct Avatar {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 
     /// Information about the user profile being shown in this Avatar.
@@ -115,8 +105,7 @@ impl Widget for Avatar {
             }
             Hit::FingerUp(fue) => if fue.is_over && fue.is_primary_hit() && fue.was_tap() {
                 cx.widget_action(
-                    widget_uid,
-                    &scope.path,
+                    widget_uid, 
                     ShowUserProfileAction::ShowUserProfile(info),
                 );
             }
@@ -131,9 +120,9 @@ impl Widget for Avatar {
     fn set_text(&mut self, cx: &mut Cx, v: &str) {
         let f = utils::user_name_first_letter(v)
             .unwrap_or("?").to_uppercase();
-        self.label(ids!(text_view.text)).set_text(cx, &f);
-        self.view(ids!(img_view)).set_visible(cx, false);
-        self.view(ids!(text_view)).set_visible(cx, true);
+        self.label(cx, ids!(text_view.text)).set_text(cx, &f);
+        self.view(cx, ids!(img_view)).set_visible(cx, false);
+        self.view(cx, ids!(text_view)).set_visible(cx, true);
     }
 }
 
@@ -164,18 +153,16 @@ impl Avatar {
                 },
                 room_id,
             });
-            self.view.apply_over(cx, live!{ cursor: Hand });
         } else {
-            self.view.apply_over(cx, live!{ cursor: Default });
+            self.info = None;
         }
         self.set_text(cx, username.as_ref());
 
         // Apply background color if provided
-        if let Some(color) = bg_color {
-            self.view(ids!(text_view)).apply_over(cx, live! {
-                draw_bg: {
-                    background_color: (color)
-                }
+        if let Some(bgc) = bg_color {
+            let mut text_view = self.view(cx, ids!(text_view));
+            script_apply_eval!(cx, text_view, {
+                draw_bg.color: #(bgc)
             });
         }
     }
@@ -200,11 +187,11 @@ impl Avatar {
     ) -> Result<(), E>
         where F: FnOnce(&mut Cx, ImageRef) -> Result<(), E>
     {
-        let img_ref = self.image(ids!(img_view.img));
+        let img_ref = self.image(cx, ids!(img_view.img));
         let res = image_set_function(cx, img_ref);
         if res.is_ok() {
-            self.view(ids!(img_view)).set_visible(cx, true);
-            self.view(ids!(text_view)).set_visible(cx, false);
+            self.view(cx, ids!(img_view)).set_visible(cx, true);
+            self.view(cx, ids!(text_view)).set_visible(cx, false);
 
             if let Some(AvatarImageInfo { user_id, username, room_id, img_data }) = info {
                 self.info = Some(UserProfileAndRoomId {
@@ -215,17 +202,16 @@ impl Avatar {
                     },
                     room_id,
                 });
-                self.view.apply_over(cx, live!{ cursor: Hand });
             } else {
-                self.view.apply_over(cx, live!{ cursor: Default });
+                self.info = None;
             }
         }
         res
     }
 
     /// Returns whether this avatar is currently displaying an image or text.
-    pub fn status(&mut self) -> AvatarDisplayStatus {
-        if self.view(ids!(img_view)).visible() {
+    pub fn status(&mut self, cx: &mut Cx) -> AvatarDisplayStatus {
+        if self.view(cx, ids!(img_view)).visible() {
             AvatarDisplayStatus::Image
         } else {
             AvatarDisplayStatus::Text
@@ -389,9 +375,9 @@ impl AvatarRef {
     }
 
     /// See [`Avatar::status()`].
-    pub fn status(&self) -> AvatarDisplayStatus {
+    pub fn status(&self, cx: &mut Cx) -> AvatarDisplayStatus {
         if let Some(mut inner) = self.borrow_mut() {
-            inner.status()
+            inner.status(cx)
         } else {
             AvatarDisplayStatus::Text
         }
diff --git a/src/shared/bouncing_dots.rs b/src/shared/bouncing_dots.rs
index 0f2e235e2..f787e6327 100644
--- a/src/shared/bouncing_dots.rs
+++ b/src/shared/bouncing_dots.rs
@@ -1,24 +1,23 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    pub BouncingDots = {{BouncingDots}} {
+    mod.widgets.BouncingDots = #(BouncingDots::register_widget(vm)) {
         width: 24,
         height: 12,
         flow: Down,
 
         show_bg: true,
-        draw_bg: {
-            color: #x000,
-            uniform anim_time: 0.0,
-            uniform freq: 0.9,  // Animation frequency
-            uniform phase_offset: 5.0, // Phase difference
-            uniform dot_radius: 1.5, // Dot radius
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+        draw_bg +: {
+            color: uniform(#x000),
+            anim_time: uniform(0.0),
+            freq: uniform(0.9),  // Animation frequency
+            phase_offset: uniform(5.0), // Phase difference
+            dot_radius: uniform(1.5), // Dot radius
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 let amplitude = self.rect_size.y * 0.21;
                 let center_y = self.rect_size.y * 0.5;
                 // Create three circle SDFs
@@ -44,16 +43,16 @@ live_design! {
             }
         }
 
-        animator: {
-            dots = {
-                default: off,
-                off = {
+        animator: Animator {
+            dots: {
+                default: @off
+                off: AnimatorState{
                     from: {all: Forward {duration: 0.0}}
                     apply: {
                         draw_bg: {anim_time: 0.0}
                     }
                 }
-                on = {
+                on: AnimatorState{
                     from: {all: Loop {duration: 1.0, end: 1.0}}
                     apply: {
                         draw_bg: {anim_time: [{time: 0.0, value: 0.0}, {time: 1.0, value: 1.0}]}
@@ -65,8 +64,9 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 pub struct BouncingDots {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[animator] animator: Animator,
 }
diff --git a/src/shared/callout_tooltip.rs b/src/shared/callout_tooltip.rs
deleted file mode 100644
index 856753428..000000000
--- a/src/shared/callout_tooltip.rs
+++ /dev/null
@@ -1,517 +0,0 @@
-//! A tooltip widget with a callout arrow/triangle that points at the referenced widget.
-//!
-//! By default, the tooltip has a black background color.
-
-use makepad_widgets::*;
-
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
-
-    // A tooltip that appears when hovering over target's area
-    pub CalloutTooltipInner = <Tooltip> {
-        content: <View> {
-            flow: Overlay,
-            width: Fit,
-            height: Fit,
-
-            rounded_view = <RoundedView> {
-                width: Fit,
-                height: Fit,
-                padding: 15,
-
-                draw_bg: {
-                    color: #fff,
-                    border_color: #D0D5DD,
-                    border_radius: 2.,
-                    instance background_color: #3b444b,
-                    // Absolute position of top left corner of the tooltip
-                    instance tooltip_pos: vec2(0.0, 0.0),
-                    // Absolute position of the moused over widget
-                    instance target_pos: vec2(0.0, 0.0),
-                    // Size of the moused over widget
-                    instance target_size: vec2(0.0, 0.0),
-                    // Expected Width of the the tooltip 
-                    instance expected_dimension_x: 0.0,
-                    // Determine height of the triangle in the callout pointer
-                    instance triangle_height: 7.5,
-                    // Determine angle of the triangle in the callout pointer in degrees
-                    instance callout_position: 180.0,
-
-                    fn pixel(self) -> vec4 {
-                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                        let rect_size = self.rect_size;
-                        let triangle_height = self.triangle_height;
-                        // If there is no expected_dimension_x, it means the tooltip size is not calculated yet, do not draw anything
-                        if self.expected_dimension_x == 0.0 {
-                            return sdf.result;
-                        }
-                        // Draw rounded box with border equals to triangle_height.
-                        sdf.box(
-                            triangle_height,
-                            triangle_height,
-                            rect_size.x - (triangle_height * 2.0),
-                            rect_size.y - (triangle_height * 2.0),
-                            max(1.0, self.border_radius)
-                        )
-                        sdf.fill(self.background_color);
-               
-                        let mut vertex1 = vec2(0.0, 0.0);
-                        let mut vertex2 = vec2(0.0, 0.0);
-                        let mut vertex3 = vec2(0.0, 0.0);
-                        if self.callout_position == 0.0 {
-                            // Point upwards
-                            // + 2.0 to overlap the triangle
-                            let diff_x = self.target_pos.x + self.target_size.x / 2.0 - self.tooltip_pos.x - triangle_height;
-                            vertex1 = vec2(
-                                min(max(triangle_height + 2.0, diff_x), rect_size.x - triangle_height * 3.0 - 2.0),
-                                triangle_height + 2.0
-                            );
-                            vertex2 = vec2(vertex1.x + triangle_height, vertex1.y - triangle_height);
-                            vertex3 = vec2(vertex1.x + triangle_height * 2.0, vertex1.y);
-                        } else if self.callout_position == 90.0 {
-                            // Point rightwards  
-                            // Triangle points to the right from the left edge of the tooltip
-                            vertex1 = vec2(rect_size.x - 2.0, rect_size.y * 0.5);
-                            vertex2 = vec2(vertex1.x - triangle_height, vertex1.y + triangle_height);
-                            vertex3 = vec2(vertex1.x - triangle_height, vertex1.y - triangle_height);
-                        } else if self.callout_position == 180.0 {
-                            // Point downwards
-                            // +/- 2.0 to overlap the triangle
-                            let diff_x = self.target_pos.x + self.target_size.x / 2.0 - self.tooltip_pos.x + triangle_height;
-                            vertex1 = vec2(
-                                min(max(triangle_height * 3.0 + 2.0, diff_x), rect_size.x - triangle_height - 2.0),
-                                rect_size.y - triangle_height - 2.0
-                            );
-                            vertex2 = vec2(vertex1.x - triangle_height, vertex1.y + triangle_height);
-                            vertex3 = vec2(vertex1.x - triangle_height * 2.0, vertex1.y);
-                        } else {
-                            // Point leftwards
-                            // Triangle points to the left from the right edge of the tooltip
-                            vertex1 = vec2(2.0, rect_size.y * 0.5);
-                            vertex2 = vec2(vertex1.x + triangle_height, vertex1.y - triangle_height);
-                            vertex3 = vec2(vertex1.x + triangle_height, vertex1.y + triangle_height);
-                        }
-                        sdf.move_to(vertex1.x, vertex1.y);
-                        sdf.line_to(vertex2.x, vertex2.y);
-                        sdf.line_to(vertex3.x, vertex3.y);
-                        sdf.close_path();
-                        sdf.fill(self.background_color);
-                        return sdf.result;
-                    }
-                }
-
-                tooltip_label = <Label> {
-                    width: Fit,
-                    height: Fit,
-                    draw_text: {
-                        text_style: <THEME_FONT_REGULAR>{font_size: 9},
-                        text_wrap: Line,
-                        color: (COLOR_PRIMARY),
-                    }
-                }
-            }
-        }
-    }
-
-    pub CalloutTooltip = {{CalloutTooltip}} {
-        tooltip = <CalloutTooltipInner> { }
-    }
-}
-
-/// Options that affect how a CalloutTooltip is displayed.
-///
-/// You don't have to specify all values, they each have a sensible default.
-#[derive(Clone, Debug)]
-pub struct CalloutTooltipOptions {
-    /// The color of the tooltip text. Defaults to pure white: #FFFFFF.
-    pub text_color: Vec4,
-    /// The background color of the tooltip. Defaults to dark gray: #424C54.
-    pub bg_color: Vec4,
-    /// The position of the tooltip relative to the widget that it's related to.
-    pub position: TooltipPosition,
-    /// The height/length of the callout triangle that points to the related widget.
-    pub triangle_height: f64,
-}
-impl Default for CalloutTooltipOptions {
-    fn default() -> Self {
-        Self {
-            text_color: vec4(1.0, 1.0, 1.0, 1.0),
-            bg_color: vec4(0.26, 0.30, 0.333, 1.0),
-            position: TooltipPosition::default(),
-            triangle_height: 7.5,
-        }
-    }
-}
-
-/// The location of the tooltip with respect to its target widget.
-#[derive(Clone, Debug, Default, PartialEq, Eq)]
-pub enum TooltipPosition {
-    /// The tooltip will be drawn above the target widget.
-    Top,
-    /// The tooltip will be drawn below the target widget.
-    Bottom,
-    /// The tooltip will be drawn to the left of the target widget.
-    Left,
-    /// (Default) The tooltip will be drawn to the right of the target widget.
-    #[default] Right,
-}
-
-/// A tooltip widget that a callout pointing towards the referenced widget.
-#[derive(Live, LiveHook, Widget)]
-pub struct CalloutTooltip {
-    #[deref] view: View,
-
-    // The below items are a hack to re-populate this tooltip automatically
-    // after a certain time interval, because its repositioning code is
-    // currently broken and needs to be rewritten entirely.
-    #[rust] timer_redraw: Timer,
-    #[rust] latest_options: Option<(String, Rect, CalloutTooltipOptions)>,
-}
-
-
-#[derive(Debug)]
-struct PositionCalculation {
-    tooltip_pos: DVec2,
-    callout_position: f64,
-    fixed_width: bool,
-    width_to_be_fixed: f64,
-}
-
-impl Widget for CalloutTooltip {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        if self.timer_redraw.is_event(event).is_some() {
-            if let Some((text, widget_rect, options)) = self.latest_options.take() {
-                self.show_with_options(cx, &text, widget_rect, options, true);
-            }
-            cx.stop_timer(self.timer_redraw);
-            self.timer_redraw = Timer::empty();
-        }
-
-        self.view.handle_event(cx, event, scope);
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.view.draw_walk(cx, scope, walk)
-    }
-}
-
-impl CalloutTooltip {
-    /// Calculate tooltip position and layout parameters for a given position
-    fn calculate_position(
-        options: &CalloutTooltipOptions,
-        widget_rect: Rect,
-        expected_dimension: DVec2,
-        screen_size: DVec2,
-        triangle_height: f64,
-    ) -> PositionCalculation {
-        let pos = widget_rect.pos;
-        let size = widget_rect.size;
-        let mut tooltip_pos = DVec2 {
-            x: min(pos.x, screen_size.x - expected_dimension.x),
-            y: min(
-                pos.y + widget_rect.size.y,
-                screen_size.y - expected_dimension.y,
-            ),
-        };
-        let mut fixed_width = false;
-        let mut callout_position = 0.0;
-        let mut width_to_be_fixed = screen_size.x;
-
-        match options.position {
-            TooltipPosition::Top => {
-                tooltip_pos.y = widget_rect.pos.y - max(expected_dimension.y, size.y);
-                callout_position = 180.0;
-            }
-            TooltipPosition::Bottom => {
-                if tooltip_pos.y == screen_size.y - expected_dimension.y {
-                    tooltip_pos.y = widget_rect.pos.y - max(expected_dimension.y, size.y);
-                    callout_position = 180.0;
-                } else {
-                    tooltip_pos.y = widget_rect.pos.y + widget_rect.size.y;
-                }
-            }
-            TooltipPosition::Left => {
-                tooltip_pos.x = widget_rect.pos.x
-                    - max(expected_dimension.x, widget_rect.size.x)
-                    - triangle_height;
-                tooltip_pos.y = widget_rect.pos.y
-                    + 0.5 * (widget_rect.size.y - max(expected_dimension.y, widget_rect.size.y));
-                callout_position = 90.0;
-            }
-            TooltipPosition::Right => {
-                tooltip_pos.x = widget_rect.pos.x + widget_rect.size.x;
-                tooltip_pos.y = widget_rect.pos.y + 0.5 * widget_rect.size.y - expected_dimension.y * 0.5;
-                width_to_be_fixed = max(
-                    screen_size.x - (pos.x + widget_rect.size.x + triangle_height * 2.0),
-                    expected_dimension.x,
-                );
-                callout_position = 270.0;
-            }
-        }
-        
-        Self::apply_edge_case_fix(
-            &options.position,
-            &mut tooltip_pos,
-            &mut fixed_width,
-            &mut width_to_be_fixed,
-            screen_size,
-            expected_dimension,
-            widget_rect,
-            triangle_height,
-        );
-
-        PositionCalculation {
-            tooltip_pos,
-            callout_position,
-            fixed_width,
-            width_to_be_fixed,
-        }
-    }
-
-    /// Check if width fixing is needed for edge cases
-    fn needs_width_fix(tooltip_x: f64, screen_width: f64, expected_width: f64) -> bool {
-        tooltip_x == screen_width - expected_width && tooltip_x < 0.0
-    }
-    
-    /// Apply edge case handling for position and width fixing
-    fn apply_edge_case_fix(
-        position: &TooltipPosition,
-        tooltip_pos: &mut DVec2,
-        fixed_width: &mut bool,
-        width_to_be_fixed: &mut f64,
-        screen_size: DVec2,
-        expected_dimension: DVec2,
-        widget_rect: Rect,
-        triangle_height: f64,
-    ) {
-        match position {
-            TooltipPosition::Top | TooltipPosition::Bottom => {
-                if Self::needs_width_fix(tooltip_pos.x, screen_size.x, expected_dimension.x) {
-                    *fixed_width = true;
-                    tooltip_pos.x = 0.0;
-                }
-            }
-            TooltipPosition::Left => {
-                if tooltip_pos.x < 0.0 {
-                    *fixed_width = true;
-                    *width_to_be_fixed = widget_rect.pos.x - triangle_height;
-                    tooltip_pos.x = 0.0;
-                }
-            }
-            TooltipPosition::Right => {
-                if *width_to_be_fixed == expected_dimension.x
-                    && *width_to_be_fixed > screen_size.x - widget_rect.pos.x - widget_rect.size.x
-                {
-                    *fixed_width = true;
-                    *width_to_be_fixed = screen_size.x - widget_rect.pos.x - widget_rect.size.x;
-                }
-            }
-        }
-    }
-
-    /// Apply tooltip configuration with given parameters
-    fn apply_tooltip_config(
-        tooltip: &mut TooltipRef,
-        cx: &mut Cx,
-        position_calc: &PositionCalculation,
-        target: Vec2,
-        target_size: Vec2,
-        expected_dimension: DVec2,
-        triangle_height: f64,
-        text_color: Vec4,
-        bg_color: Vec4,
-    ) {
-        let tooltip_pos = vec2(position_calc.tooltip_pos.x as f32, position_calc.tooltip_pos.y as f32);
-        
-        if position_calc.fixed_width {
-            tooltip.apply_over(
-                cx,
-                live!(
-                content: {
-                    margin: { left: (tooltip_pos.x), top: (tooltip_pos.y) },
-                    rounded_view = {
-                        height: Fit,
-                        draw_bg: {
-                            triangle_height: (triangle_height),
-                            background_color: (bg_color),
-                            tooltip_pos: (tooltip_pos),
-                            target_pos: (target),
-                            target_size: (target_size),
-                            expected_dimension_x: (expected_dimension.x),
-                            callout_position: (position_calc.callout_position)
-                        }
-                        tooltip_label = {
-                            width: (position_calc.width_to_be_fixed - 15.0 * 2.0),
-                            draw_text: { color: (text_color) }
-                        }
-                    }
-                }),
-            );
-        } else {
-            tooltip.apply_over(cx, live!(
-                content: {
-                    margin: { left: (tooltip_pos.x), top: (tooltip_pos.y) },
-                    rounded_view = {
-                        height: Fit,
-                        draw_bg: {
-                            triangle_height: (triangle_height),
-                            background_color: (bg_color),
-                            tooltip_pos: (tooltip_pos),
-                            target_pos: (target),
-                            target_size: (target_size),
-                            expected_dimension_x: (expected_dimension.x),
-                            callout_position: (position_calc.callout_position)
-                        }
-                        tooltip_label = {
-                            width: Fit,
-                            draw_text: { color: (text_color) }
-                        }
-                    }
-                }
-            ));
-        }
-    }
-
-    /// Shows a tooltip with the given text and options.
-    ///
-    /// The tooltip comes with a callout pointing to its target.
-    ///
-    /// By default, the tooltip will be displayed to the widget's right.
-    ///
-    /// If the widget is too close to the edge of the window, the tooltip is positioned
-    /// to avoid being cut off, with automatic fallback to opposite directions.
-    pub fn show_with_options(
-        &mut self,
-        cx: &mut Cx,
-        text: &str,
-        widget_rect: Rect,
-        options: CalloutTooltipOptions,
-        is_internal_redraw: bool,
-    ) {
-        if !is_internal_redraw {
-            self.latest_options = Some((
-                text.to_owned(),
-                widget_rect,
-                options.clone(),
-            ));
-        }
-
-        let mut tooltip = self.view.tooltip(ids!(tooltip));
-        tooltip.set_text(cx, &pad_last_line(text));
-
-        let expected_dimension = tooltip.view(ids!(rounded_view)).area().rect(cx).size;
-        let screen_size = tooltip.area().rect(cx).size;
-        let position_calc = Self::calculate_position(
-            &options,
-            widget_rect,
-            expected_dimension,
-            screen_size,
-            options.triangle_height,
-        );
-
-        let target = vec2(
-            widget_rect.pos.x as f32,
-            widget_rect.pos.y as f32,
-        );
-        let target_size = vec2(
-            widget_rect.size.x as f32,
-            widget_rect.size.y as f32,
-        );
-
-        let mut text_color = options.text_color;
-        if expected_dimension.x == 0.0 {
-            text_color.w = 0.0;
-        }
-
-        Self::apply_tooltip_config(
-            &mut tooltip,
-            cx,
-            &position_calc,
-            target,
-            target_size,
-            expected_dimension,
-            options.triangle_height,
-            text_color,
-            options.bg_color,
-        );
-
-        if !is_internal_redraw {
-            cx.stop_timer(self.timer_redraw);
-            self.timer_redraw = cx.start_timeout(0.05); // 50ms
-        }
-        self.view.tooltip(ids!(tooltip)).show(cx);
-    }
-
-    /// Hide the tooltip.
-    pub fn hide(&mut self, cx: &mut Cx) {
-        self.latest_options = None;
-        cx.stop_timer(self.timer_redraw);
-        self.timer_redraw = Timer::empty();
-        self.view.tooltip(ids!(tooltip)).hide(cx);
-    }
-}
-
-impl CalloutTooltipRef {
-    /// See [`CalloutTooltip::show_with_options()`].
-    pub fn show_with_options(
-        &mut self,
-        cx: &mut Cx,
-        text: &str,
-        widget_rect: Rect,
-        options: CalloutTooltipOptions,
-    ) {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.show_with_options(cx, text, widget_rect, options, false);
-        }
-    }
-
-    /// See [`CalloutTooltip::hide()`].
-    pub fn hide(&self, cx: &mut Cx) {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.hide(cx);
-        }
-    }
-}
-
-/// Actions that can be emitted from anywhere to show or hide the `tooltip`.
-#[derive(Clone, Debug, DefaultNone)]
-pub enum TooltipAction {
-    /// Show the tooltip with the given text and options.
-    HoverIn {
-        text: String,
-        /// The location of the widget that the tooltip is positioned relative to.
-        widget_rect: Rect,
-        options: CalloutTooltipOptions,
-    },
-    /// Hide the tooltip.
-    HoverOut,
-    None,
-}
-
-/// Takes a string and lengthens the last line of the string to be the same
-/// length as the longest line in the string.
-///
-/// This is useful for creating tooltips that line up with the text above
-/// them.
-fn pad_last_line(text: &str) -> String {
-    let lines = text.split('\n');
-    let (lines_len, _) = lines.size_hint();
-    if lines_len <= 1 {
-        return text.to_string();
-    }
-    let longest_line = lines.clone().map(|s| s.len()).max().unwrap_or(0);
-    let mut full_text = String::with_capacity(text.len() + longest_line + 4);
-    for (i, line) in lines.enumerate() {
-        full_text.push_str(line);
-        if i < lines_len - 1 {
-            full_text.push('\n');
-        } else {
-            // Plus 4 is added to add more width to the last line otherwise the first line is still being cut off
-            full_text.push_str(&" ".repeat(longest_line - line.len() + 4));
-        }
-    }
-    full_text
-}
diff --git a/src/shared/collapsible_header.rs b/src/shared/collapsible_header.rs
index 0b6ee0ada..52bdd3f1d 100644
--- a/src/shared/collapsible_header.rs
+++ b/src/shared/collapsible_header.rs
@@ -9,65 +9,70 @@
 
 use makepad_widgets::*;
 
+use crate::ApplyOverCompat;
 use crate::home::rooms_list::RoomsListScopeProps;
 
 use super::unread_badge::UnreadBadgeWidgetExt;
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
-    use link::shaders::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::unread_badge::*;
 
-    ICON_COLLAPSE = dep("crate://self/resources/icons/triangle_fill.svg")
+    mod.widgets.ICON_COLLAPSE = crate_resource("self://resources/icons/triangle_fill.svg")
 
-    COLOR_HEADER_FG = #F;
-    COLOR_HEADER_BG = (COLOR_ROBRIX_PURPLE); // the purple color from the Robrix logo
 
 
-    pub CollapsibleHeader = {{CollapsibleHeader}}<RoundedView> {
+    mod.widgets.COLOR_HEADER_FG = #F;
+
+    mod.widgets.COLOR_HEADER_BG = (mod.widgets.COLOR_ROBRIX_PURPLE); // the purple color from the Robrix logo
+
+
+    mod.widgets.CollapsibleHeader = set_type_default() do #(CollapsibleHeader::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         width: Fill,
         height: 35,
-        align: { x: 0.0, y: 0.5 },
-        margin: {top: 3, bottom: 3, left: 0, right: 0},
+        align: Align{ x: 0.0, y: 0.5 },
+        margin: Inset{top: 3, bottom: 3, left: 0, right: 0},
         padding: 5
         flow: Right,
 
-        cursor: Hand,
-        draw_bg: {
+        cursor: MouseCursor.Hand,
+        draw_bg +: {
             border_radius: 4.0,
-            color: (COLOR_HEADER_BG)
+            color: instance((mod.widgets.COLOR_HEADER_BG))
         }
 
-        collapse_icon = <IconRotated> {
-            margin: {left: 5, right: 8, top: 0, bottom: 0},
-            draw_icon: {
-                svg_file: (ICON_COLLAPSE),
+        collapse_icon := IconRotated {
+            margin: Inset{left: 5, right: 8, top: 0, bottom: 0},
+            draw_icon +: {
+                svg: (mod.widgets.ICON_COLLAPSE),
                 rotation_angle: 180.0, // start in the "expanded" state
-                color: (COLOR_HEADER_FG),
+                color: (mod.widgets.COLOR_HEADER_FG),
             }
-            icon_walk: { width: 14, height: Fit, margin: 0, }
+            icon_walk: Walk{ width: 14, height: Fit, margin: 0, }
         }
-        label = <Label> {
+
+        label := Label {
             padding: 0,
             width: Fill,
             height: Fit,
             text: "",
-            draw_text: {
-                text_style: <REGULAR_TEXT>{font_size: 11},
-                color: (COLOR_HEADER_FG),
+            draw_text +: {
+                text_style: mod.widgets.REGULAR_TEXT {font_size: 11},
+                color: (mod.widgets.COLOR_HEADER_FG),
             }
         }
-        unread_badge = <UnreadBadge> {
-            margin: {right: 5.5},
+
+        unread_badge := UnreadBadge {
+            margin: Inset{right: 5.5},
         }
     }
 }
 
 /// The categories of collapsible headers in the rooms list.
-#[derive(Copy, Clone, Debug, DefaultNone)]
+#[derive(Copy, Clone, Debug, Default)]
 pub enum HeaderCategory {
     /// Rooms the user has been invited to but has not yet joined.
     Invites,
@@ -81,6 +86,7 @@ pub enum HeaderCategory {
     LowPriority,
     /// Rooms that the user has left.
     LeftRooms,
+    #[default]
     None,
 }
 impl HeaderCategory {
@@ -97,16 +103,17 @@ impl HeaderCategory {
     }
 }
 
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum CollapsibleHeaderAction {
     /// The header was clicked to toggled its expanded/collapsed state.
     Toggled {
         category: HeaderCategory,
     },
+    #[default]
     None,
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct CollapsibleHeader {
     #[deref] view: View,
     #[rust(true)] is_expanded: bool,
@@ -132,28 +139,31 @@ impl Widget for CollapsibleHeader {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        let angle = if self.is_expanded {
-            180.0
+        if self.is_expanded {
+            self.icon(cx, ids!(collapse_icon)).apply_over(
+                cx,
+                live! {
+                    draw_icon: { rotation_angle: 180.0 }
+                },
+            );
         } else {
-            90.0
-        };
-        self.icon(ids!(collapse_icon)).apply_over(
-            cx,
-            live! {
-                draw_icon: { rotation_angle: (angle) }
-            },
-        );
+            self.icon(cx, ids!(collapse_icon)).apply_over(
+                cx,
+                live! {
+                    draw_icon: { rotation_angle: 90.0 }
+                },
+            );
+        }
         self.view.draw_walk(cx, scope, walk)
     }
 }
 
 impl CollapsibleHeader {
-    fn toggle_collapse(&mut self, cx: &mut Cx, scope: &mut Scope) {
+    fn toggle_collapse(&mut self, cx: &mut Cx, _scope: &mut Scope) {
         self.is_expanded = !self.is_expanded;
         self.redraw(cx);
         cx.widget_action(
-            self.widget_uid(),
-            &scope.path,
+            self.widget_uid(), 
             CollapsibleHeaderAction::Toggled {
                 category: self.category,
             },
@@ -173,9 +183,9 @@ impl CollapsibleHeaderRef {
         if let Some(mut inner) = self.borrow_mut() {
             inner.is_expanded = is_expanded;
             inner.category = category;
-            inner.label(ids!(label)).set_text(cx, category.as_str());
+            inner.label(cx, ids!(label)).set_text(cx, category.as_str());
             inner
-                .unread_badge(ids!(unread_badge))
+                .unread_badge(cx, ids!(unread_badge))
                 .update_counts(false, num_unread_mentions, 0);
         }
     }
diff --git a/src/shared/command_text_input.rs b/src/shared/command_text_input.rs
new file mode 100644
index 000000000..9a7e80e0e
--- /dev/null
+++ b/src/shared/command_text_input.rs
@@ -0,0 +1,925 @@
+use makepad_widgets::{makepad_draw::text::selection::Cursor, *};
+use unicode_segmentation::UnicodeSegmentation;
+
+script_mod! {
+    use mod.prelude.widgets_internal.*
+    use mod.widgets.*
+
+    mod.widgets.CommandTextInputListBase = #(List::register_widget(vm))
+
+    mod.widgets.CommandTextInputList = mod.widgets.CommandTextInputListBase{
+        flow: Down
+        width: Fill
+        height: Fill
+    }
+
+    mod.widgets.CommandTextInputBase = #(CommandTextInput::register_widget(vm))
+
+    mod.widgets.CommandTextInput = mod.widgets.CommandTextInputBase{
+        flow: Down
+        height: Fit
+
+        popup := RoundedView{
+            flow: Down
+            height: Fit
+            visible: false
+
+            draw_bg +: {
+                color: instance(theme.color_fg_app)
+                border_size: theme.beveling
+                border_color: instance(theme.color_bevel)
+                border_radius: theme.corner_radius
+
+                pixel: fn() {
+                    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+
+                    // External outline (entire component including border)
+                    sdf.box_all(
+                        0.0
+                        0.0
+                        self.rect_size.x
+                        self.rect_size.y
+                        self.border_radius
+                        self.border_radius
+                        self.border_radius
+                        self.border_radius
+                    )
+                    sdf.fill(self.border_color)  // Fill the entire area with border color
+
+                    // Internal outline (content area)
+                    sdf.box_all(
+                        self.border_size
+                        self.border_size
+                        self.rect_size.x - self.border_size * 2.0
+                        self.rect_size.y - self.border_size * 2.0
+                        self.border_radius - self.border_size
+                        self.border_radius - self.border_size
+                        self.border_radius - self.border_size
+                        self.border_radius - self.border_size
+                    )
+                    sdf.fill(self.color)  // Fill content area with background color
+
+                    return sdf.result
+                }
+            }
+
+            header_view := SolidView{
+                width: Fill
+                height: Fit
+                padding: Inset{left: 12., right: 12., top: 12., bottom: 12.}
+                show_bg: true
+                visible: true
+                draw_bg +: {
+                    color: instance(theme.color_fg_app)
+                    top_radius: instance(theme.corner_radius)
+                    border_color: instance(theme.color_bevel)
+                    border_width: instance(theme.beveling)
+                    pixel: fn() {
+                        let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+                        sdf.box_all(
+                            0.0
+                            0.0
+                            self.rect_size.x
+                            self.rect_size.y
+                            self.top_radius
+                            self.top_radius
+                            1.0
+                            1.0
+                        )
+                        sdf.fill(self.color)
+                        return sdf.result
+                    }
+                }
+
+                header_label := Label{
+                    draw_text +: {
+                        color: theme.color_label_inner
+                        text_style: theme.font_regular{
+                            font_size: theme.font_size_4
+                        }
+                    }
+                }
+            }
+
+            // Wrapper workaround to hide search input when inline search is enabled
+            // as we currently can't hide the search input avoiding events.
+            search_input_wrapper := RoundedView{
+                height: Fit
+                search_input := TextInput{
+                    width: Fill
+                    height: Fit
+                }
+            }
+
+            list := mod.widgets.CommandTextInputList{
+                height: Fit
+            }
+        }
+
+        persistent := RoundedView{
+            flow: Down
+            height: Fit
+            top := View{ height: Fit }
+            center := RoundedView{
+                height: Fit
+                // `left` and `right` seems to not work with `height: Fill`.
+                left := View{ width: Fit, height: Fit }
+                text_input := TextInput{ width: Fill }
+                right := View{ width: Fit, height: Fit }
+            }
+            bottom := View{ height: Fit }
+        }
+    }
+}
+
+#[derive(Debug, Copy, Clone, Default)]
+enum InternalAction {
+    ShouldBuildItems,
+    ItemSelected,
+    #[default]
+    None,
+}
+
+/// `TextInput` wrapper glued to a popup list of options that is shown when a
+/// trigger character is typed.
+///
+/// Limitation: Selectable items are expected to be `View`s.
+#[derive(Script, ScriptHook, Widget)]
+pub struct CommandTextInput {
+    #[source]
+    source: ScriptObjectRef,
+    #[deref]
+    deref: View,
+
+    /// The character that triggers the popup.
+    ///
+    /// If not set, popup can't be triggerd by keyboard.
+    ///
+    /// Behavior is undefined if this string contains anything other than a
+    /// single grapheme.
+    #[live]
+    pub trigger: Option<String>,
+
+    /// Handle search within the main text input instead of using a separate
+    /// search input.
+    ///
+    /// Note: Any kind of whitespace will terminate search.
+    #[live]
+    pub inline_search: bool,
+
+    /// Strong color to highlight the item that would be submitted if `Return` is pressed.
+    #[live]
+    pub color_focus: Vec4f,
+
+    /// Weak color to highlight the item that the pointer is hovering over.
+    #[live]
+    pub color_hover: Vec4f,
+
+    /// To deal with focus requesting issues.
+    #[rust]
+    is_search_input_focus_pending: bool,
+
+    /// To deal with focus requesting issues.
+    #[rust]
+    is_text_input_focus_pending: bool,
+
+    /// Index from `selectable_widgets` that would be submitted if `Return` is pressed.
+    /// `None` if there are no selectable widgets.
+    #[rust]
+    keyboard_focus_index: Option<usize>,
+
+    /// Index from `selectable_widgets` that the pointer is hovering over.
+    /// `None` if there are no selectable widgets.
+    #[rust]
+    pointer_hover_index: Option<usize>,
+
+    /// Convenience copy of the selectable widgets on the popup list.
+    #[rust]
+    selectable_widgets: Vec<WidgetRef>,
+
+    /// To deal with widgets not being `Send`.
+    #[rust]
+    last_selected_widget: WidgetRef,
+
+    /// Remember where trigger was inserted to support `inline_search`.
+    #[rust]
+    trigger_position: Option<usize>,
+
+    /// Remmeber which was the last cursor position handled, to support `inline_search`.
+    #[rust]
+    prev_cursor_position: usize,
+}
+
+impl Widget for CommandTextInput {
+    fn set_text(&mut self, cx: &mut Cx, v: &str) {
+        self.text_input_ref(cx).set_text(cx, v);
+    }
+
+    fn text(&self) -> String {
+        // Cannot use text_input_ref() here as it requires cx.
+        // The text is accessible via the Widget trait default;
+        // callers with cx should use text_input_ref(cx).text() instead.
+        String::new()
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.update_highlights(cx);
+        self.ensure_popup_consistent(cx);
+
+        while !self.deref.draw_walk(cx, scope, walk).is_done() {}
+
+        if self.is_search_input_focus_pending {
+            self.is_search_input_focus_pending = false;
+            self.search_input_ref(cx).set_key_focus(cx);
+        }
+
+        if self.is_text_input_focus_pending {
+            self.is_text_input_focus_pending = false;
+            self.text_input_ref(cx).set_key_focus(cx);
+        }
+
+        DrawStep::done()
+    }
+
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if cx.has_key_focus(self.key_controller_text_input_ref(cx).area()) {
+            if let Event::KeyDown(key_event) = event {
+                let popup_visible = self.view(cx, ids!(popup)).visible();
+
+                if popup_visible {
+                    let mut eat_the_event = true;
+
+                    match key_event.key_code {
+                        KeyCode::ArrowDown => {
+                            // Clear mouse hover when using up/down keys
+                            self.pointer_hover_index = None;
+                            self.on_keyboard_move(cx, 1);
+                        }
+                        KeyCode::ArrowUp => {
+                            // Clear mouse hover when using up/down keys
+                            self.pointer_hover_index = None;
+                            self.on_keyboard_move(cx, -1);
+                        }
+                        KeyCode::ReturnKey => {
+                            self.on_keyboard_controller_input_submit(cx, scope);
+                        }
+                        KeyCode::Escape => {
+                            self.is_text_input_focus_pending = true;
+                            self.hide_popup(cx);
+                            self.redraw(cx);
+                        }
+                        _ => {
+                            eat_the_event = false;
+                        }
+                    };
+
+                    if eat_the_event {
+                        return;
+                    }
+                }
+            }
+        }
+
+        self.deref.handle_event(cx, event, scope);
+
+        if cx.has_key_focus(self.text_input_ref(cx).area()) {
+            if let Event::TextInput(input_event) = event {
+                self.on_text_inserted(cx, scope, &input_event.input);
+            }
+
+            if self.inline_search {
+                if let Some(trigger_pos) = self.trigger_position {
+                    let current_pos = get_head(&self.text_input_ref(cx));
+                    let current_search = self.search_text(cx);
+
+                    if current_pos < trigger_pos || graphemes(&current_search).any(is_whitespace) {
+                        self.hide_popup(cx);
+                        self.redraw(cx);
+                    } else if self.prev_cursor_position != current_pos {
+                        // mimic how discord updates the filter when moving the cursor
+                        cx.widget_action(self.widget_uid(), InternalAction::ShouldBuildItems);
+                        self.ensure_popup_consistent(cx);
+                    }
+                }
+            }
+        }
+
+        if let Event::Actions(actions) = event {
+            let mut selected_by_click = None;
+            let mut should_redraw = false;
+
+            for (idx, item) in self.selectable_widgets.iter().enumerate() {
+                let item = item.as_view();
+
+                if item
+                    .finger_down(actions)
+                    .map(|fe| fe.tap_count == 1)
+                    .unwrap_or(false)
+                {
+                    selected_by_click = Some((&*item).clone());
+
+                    // Clear keyboard focus when mouse is clicked
+                    self.keyboard_focus_index = None;
+                }
+
+                if item.finger_hover_out(actions).is_some() && Some(idx) == self.pointer_hover_index
+                {
+                    self.pointer_hover_index = None;
+                    should_redraw = true;
+                }
+
+                if item.finger_hover_in(actions).is_some() {
+                    // When mouse enters item, clear keyboard focus and set mouse hover index
+                    self.pointer_hover_index = Some(idx);
+                    self.keyboard_focus_index = None;
+                    should_redraw = true;
+                }
+            }
+
+            if should_redraw {
+                self.redraw(cx);
+            }
+
+            if let Some(selected) = selected_by_click {
+                self.select_item(cx, scope, selected);
+            }
+
+            for action in actions.iter().filter_map(|a| a.as_widget_action()) {
+                if action.widget_uid == self.key_controller_text_input_ref(cx).widget_uid() {
+                    if let TextInputAction::KeyFocusLost = action.cast() {
+                        self.hide_popup(cx);
+                        self.redraw(cx);
+                    }
+                }
+
+                if action.widget_uid == self.search_input_ref(cx).widget_uid() {
+                    if let TextInputAction::Changed(search) = action.cast() {
+                        // disallow multiline input
+                        self.search_input_ref(cx)
+                            .set_text(cx, search.lines().next().unwrap_or_default());
+
+                        cx.widget_action(self.widget_uid(), InternalAction::ShouldBuildItems);
+                        self.ensure_popup_consistent(cx);
+                    }
+                }
+            }
+        }
+
+        self.prev_cursor_position = get_head(&self.text_input_ref(cx));
+        self.ensure_popup_consistent(cx);
+    }
+}
+
+impl CommandTextInput {
+    // Ensure popup state consistency
+    fn ensure_popup_consistent(&mut self, cx: &mut Cx) {
+        if self.view(cx, ids!(popup)).visible() {
+            if self.inline_search {
+                self.view(cx, ids!(search_input_wrapper))
+                    .set_visible(cx, false);
+            } else {
+                self.view(cx, ids!(search_input_wrapper))
+                    .set_visible(cx, true);
+            }
+        }
+    }
+
+    pub fn keyboard_focus_index(&self) -> Option<usize> {
+        self.keyboard_focus_index
+    }
+
+    /// Sets the keyboard focus index for the list of selectable items
+    /// Only updates the visual highlight state of the dropdown items
+    pub fn set_keyboard_focus_index(&mut self, idx: usize) {
+        // Only process if popup is visible and we have items
+        if !self.selectable_widgets.is_empty() {
+            // Simply update the focus index within valid bounds
+            self.keyboard_focus_index = Some(idx.clamp(0, self.selectable_widgets.len() - 1));
+        }
+    }
+
+    fn on_text_inserted(&mut self, cx: &mut Cx, _scope: &mut Scope, inserted: &str) {
+        if graphemes(inserted).last() == self.trigger_grapheme() {
+            self.show_popup(cx);
+            self.trigger_position = Some(get_head(&self.text_input_ref(cx)));
+
+            if self.inline_search {
+                self.view(cx, ids!(search_input_wrapper))
+                    .set_visible(cx, false);
+            } else {
+                self.view(cx, ids!(search_input_wrapper))
+                    .set_visible(cx, true);
+                self.is_search_input_focus_pending = true;
+            }
+
+            cx.widget_action(self.widget_uid(), InternalAction::ShouldBuildItems);
+            self.ensure_popup_consistent(cx);
+        }
+    }
+
+    fn on_keyboard_controller_input_submit(&mut self, cx: &mut Cx, scope: &mut Scope) {
+        let Some(idx) = self.keyboard_focus_index else {
+            return;
+        };
+
+        self.select_item(cx, scope, self.selectable_widgets[idx].clone());
+    }
+
+    fn select_item(&mut self, cx: &mut Cx, _scope: &mut Scope, selected: WidgetRef) {
+        self.try_remove_trigger_and_inline_search(cx);
+        self.last_selected_widget = selected;
+        cx.widget_action(self.widget_uid(), InternalAction::ItemSelected);
+        self.hide_popup(cx);
+        self.is_text_input_focus_pending = true;
+        self.redraw(cx);
+    }
+
+    fn try_remove_trigger_and_inline_search(&mut self, cx: &mut Cx) {
+        let mut to_remove = self.trigger_grapheme().unwrap_or_default().to_string();
+
+        if self.inline_search {
+            to_remove.push_str(&self.search_text(cx));
+        }
+
+        let text = self.text_input_ref(cx).text();
+        let end = get_head(&self.text_input_ref(cx));
+        // Use graphemes instead of byte indices
+        let text_graphemes: Vec<&str> = text.graphemes(true).collect();
+        let mut byte_index = 0;
+        let mut end_grapheme_idx = 0;
+
+        // Find the grapheme index corresponding to the end position
+        for (i, g) in text_graphemes.iter().enumerate() {
+            if byte_index <= end && byte_index + g.len() > end {
+                end_grapheme_idx = i;
+                break;
+            }
+            byte_index += g.len();
+        }
+
+        // Calculate the start grapheme index
+        let start_grapheme_idx = if end_grapheme_idx >= to_remove.graphemes(true).count() {
+            end_grapheme_idx - to_remove.graphemes(true).count()
+        } else {
+            return;
+        };
+
+        // Rebuild the string
+        let mut new_text = text_graphemes[..start_grapheme_idx].join("");
+        new_text.push_str(&text_graphemes[end_grapheme_idx..].join(""));
+
+        // Calculate the new cursor position (grapheme)
+        let new_cursor_pos = text_graphemes[..start_grapheme_idx]
+            .join("")
+            .graphemes(true)
+            .count();
+
+        self.text_input_ref(cx).set_cursor(
+            cx,
+            Cursor {
+                index: new_cursor_pos,
+                prefer_next_row: false,
+            },
+            false,
+        );
+        self.set_text(cx, &new_text);
+    }
+
+    fn show_popup(&mut self, cx: &mut Cx) {
+        if self.inline_search {
+            self.view(cx, ids!(search_input_wrapper))
+                .set_visible(cx, false);
+        } else {
+            self.view(cx, ids!(search_input_wrapper))
+                .set_visible(cx, true);
+        }
+        self.view(cx, ids!(popup)).set_visible(cx, true);
+        self.view(cx, ids!(popup)).redraw(cx);
+    }
+
+    fn hide_popup(&mut self, cx: &mut Cx) {
+        self.clear_popup(cx);
+        self.view(cx, ids!(popup)).set_visible(cx, false);
+    }
+
+    /// Clear all text and hide the popup going back to initial state.
+    pub fn reset(&mut self, cx: &mut Cx) {
+        self.hide_popup(cx);
+        self.text_input_ref(cx).set_text(cx, "");
+    }
+
+    fn clear_popup(&mut self, cx: &mut Cx) {
+        self.trigger_position = None;
+        self.search_input_ref(cx).set_text(cx, "");
+        self.search_input_ref(cx).set_cursor(
+            cx,
+            Cursor {
+                index: 0,
+                prefer_next_row: false,
+            },
+            false,
+        );
+        self.clear_items(cx);
+    }
+
+    /// Clears the list of items.
+    ///
+    /// Normally called as response to `should_build_items`.
+    pub fn clear_items(&mut self, cx: &Cx) {
+        self.list(cx, ids!(list)).clear();
+        self.selectable_widgets.clear();
+        self.keyboard_focus_index = None;
+        self.pointer_hover_index = None;
+    }
+
+    /// Add a custom selectable item to the list.
+    ///
+    /// Normally called after clearing the previous items.
+    pub fn add_item(&mut self, cx: &Cx, widget: WidgetRef) {
+        self.list(cx, ids!(list)).add(widget.clone());
+        self.selectable_widgets.push(widget);
+        self.keyboard_focus_index = self.keyboard_focus_index.or(Some(0));
+    }
+
+    /// Add a custom unselectable item to the list.
+    ///
+    /// Ex: Headers, dividers, etc.
+    ///
+    /// Normally called after clearing the previous items.
+    pub fn add_unselectable_item(&mut self, cx: &Cx, widget: WidgetRef) {
+        self.list(cx, ids!(list)).add(widget);
+    }
+
+    /// Get the current search query.
+    ///
+    /// You probably want this for filtering purposes when updating the items.
+    pub fn search_text(&self, cx: &Cx) -> String {
+        // Define maximum search text length to prevent performance issues with very long search texts
+        const MAX_SEARCH_TEXT_LENGTH: usize = 100;
+
+        if self.inline_search {
+            if let Some(trigger_pos) = self.trigger_position {
+                let text = self.text_input_ref(cx).text();
+                let head = get_head(&self.text_input_ref(cx));
+
+                if head > trigger_pos {
+                    // Parse text into graphemes (Unicode grapheme clusters)
+                    let text_graphemes: Vec<&str> = text.graphemes(true).collect();
+                    let mut byte_pos = 0;
+                    let mut trigger_grapheme_idx = None;
+                    let mut head_grapheme_idx = None;
+                    let mut last_grapheme_end = 0;
+
+                    // Single-pass traversal to calculate all grapheme indices
+                    for (i, g) in text_graphemes.iter().enumerate() {
+                        // Check if the trigger character is within this grapheme
+                        if byte_pos <= trigger_pos && byte_pos + g.len() > trigger_pos {
+                            trigger_grapheme_idx = Some(i);
+                        }
+                        // Check if the trigger character is exactly at the end of this grapheme
+                        else if byte_pos + g.len() == trigger_pos {
+                            // Special case: trigger at grapheme boundary, point to the next grapheme
+                            trigger_grapheme_idx = Some(i + 1);
+                        }
+
+                        // Check if the cursor is within this grapheme
+                        if byte_pos <= head && byte_pos + g.len() > head {
+                            head_grapheme_idx = Some(i);
+                        }
+                        // Check if the cursor is exactly at the end of this grapheme
+                        else if byte_pos + g.len() == head {
+                            // Special case: cursor at grapheme boundary, point to the next grapheme
+                            head_grapheme_idx = Some(i + 1);
+                        }
+
+                        byte_pos += g.len();
+                        last_grapheme_end = byte_pos;
+                    }
+
+                    // Handle edge cases at the end of text symmetrically for both positions
+                    if head_grapheme_idx.is_none() && head >= last_grapheme_end {
+                        head_grapheme_idx = Some(text_graphemes.len());
+                    }
+
+                    if trigger_grapheme_idx.is_none() && trigger_pos >= last_grapheme_end {
+                        trigger_grapheme_idx = Some(text_graphemes.len());
+                    }
+
+                    // Safety check and use indices only if they're valid
+                    if let (Some(t_idx), Some(h_idx)) = (trigger_grapheme_idx, head_grapheme_idx) {
+                        // Additional range check to prevent index errors
+                        if t_idx >= text_graphemes.len() || h_idx > text_graphemes.len() {
+                            log!("Error: Grapheme indices out of range: t_idx={}, h_idx={}, graphemes_len={}",
+                                 t_idx, h_idx, text_graphemes.len());
+                            return String::new();
+                        }
+
+                        if t_idx < h_idx {
+                            // Check length limit
+                            let length = h_idx - t_idx;
+                            if length > MAX_SEARCH_TEXT_LENGTH {
+                                log!(
+                                    "Warning: Search text length({}) exceeds maximum limit({})",
+                                    length,
+                                    MAX_SEARCH_TEXT_LENGTH
+                                );
+                                // Still return text but truncated to the maximum length
+                                return text_graphemes[t_idx..t_idx + MAX_SEARCH_TEXT_LENGTH]
+                                    .join("");
+                            }
+
+                            // Optimized string building with pre-allocated capacity
+                            let mut result = String::with_capacity(
+                                text_graphemes[t_idx..h_idx].iter().map(|g| g.len()).sum(),
+                            );
+                            for g in &text_graphemes[t_idx..h_idx] {
+                                result.push_str(g);
+                            }
+                            return result;
+                        } else if t_idx == h_idx {
+                            // Edge case: trigger character and cursor in the same grapheme
+                            return String::new();
+                        } else {
+                            // Abnormal case: trigger character is after the cursor
+                            log!("Warning: Trigger character is after cursor: trigger_idx={}, head_idx={}, trigger_pos={}, head={}",
+                                 t_idx, h_idx, trigger_pos, head);
+                            return String::new();
+                        }
+                    } else {
+                        // Comprehensive diagnostic information
+                        log!("Warning: Unable to find valid grapheme indices: trigger_idx={:?}, head_idx={:?}, trigger_pos={}, head={}, text_len={}, graphemes_len={}",
+                             trigger_grapheme_idx, head_grapheme_idx, trigger_pos, head, text.len(), text_graphemes.len());
+                        return String::new();
+                    }
+                }
+
+                // Cursor is at or before the trigger position
+                String::new()
+            } else {
+                // No trigger position
+                String::new()
+            }
+        } else {
+            // Non-inline search mode
+            self.search_input_ref(cx).text()
+        }
+    }
+
+    /// Checks if any item has been selected in the given `actions`
+    /// and returns a reference to the selected item as a widget.
+    pub fn item_selected(&self, actions: &Actions) -> Option<WidgetRef> {
+        actions
+            .iter()
+            .filter_map(|a| a.as_widget_action())
+            .filter(|a| a.widget_uid == self.widget_uid())
+            .find_map(|a| {
+                if let InternalAction::ItemSelected = a.cast() {
+                    Some(self.last_selected_widget.clone())
+                } else {
+                    None
+                }
+            })
+    }
+
+    /// Returns `true` if an action in the given `actions` indicates that
+    /// the items to display need to be recomputed again.
+    ///
+    /// For example, this returns true if the trigger character was typed,
+    /// if the search filter changes, etc.
+    pub fn should_build_items(&self, actions: &Actions) -> bool {
+        actions
+            .iter()
+            .filter_map(|a| a.as_widget_action())
+            .filter(|a| a.widget_uid == self.widget_uid())
+            .any(|a| matches!(a.cast(), InternalAction::ShouldBuildItems))
+    }
+
+    /// Returns a reference to the inner `TextInput` widget.
+    pub fn text_input_ref(&self, cx: &Cx) -> TextInputRef {
+        self.text_input(cx, ids!(text_input))
+    }
+
+    /// Returns a reference to the inner `TextInput` widget used for search.
+    pub fn search_input_ref(&self, cx: &Cx) -> TextInputRef {
+        self.text_input(cx, ids!(search_input))
+    }
+
+    fn trigger_grapheme(&self) -> Option<&str> {
+        self.trigger.as_ref().and_then(|t| graphemes(t).next())
+    }
+
+    fn key_controller_text_input_ref(&self, cx: &Cx) -> TextInputRef {
+        if self.inline_search {
+            self.text_input_ref(cx)
+        } else {
+            self.search_input_ref(cx)
+        }
+    }
+
+    fn on_keyboard_move(&mut self, cx: &mut Cx, delta: i32) {
+        let Some(idx) = self.keyboard_focus_index else {
+            // If no keyboard focus exists but user pressed arrow keys, focus on first item
+            if !self.selectable_widgets.is_empty() {
+                if delta > 0 {
+                    self.keyboard_focus_index = Some(0);
+                } else {
+                    self.keyboard_focus_index = Some(self.selectable_widgets.len() - 1);
+                }
+            }
+            return;
+        };
+
+        let new_index = idx
+            .saturating_add_signed(delta as isize)
+            .clamp(0, self.selectable_widgets.len() - 1);
+
+        if idx != new_index {
+            self.keyboard_focus_index = Some(new_index);
+        }
+
+        // Clear mouse hover state when using keyboard navigation
+        // This ensures keyboard navigation and mouse hover don't appear simultaneously
+        self.pointer_hover_index = None;
+
+        self.redraw(cx);
+    }
+
+    fn update_highlights(&mut self, cx: &mut Cx) {
+        // Check if currently there is a keyboard-focused item
+        let has_keyboard_focus = self.keyboard_focus_index.is_some();
+
+        for (idx, item) in self.selectable_widgets.iter().enumerate() {
+            let mut item = item.clone();
+            script_apply_eval!(cx, item, {
+                show_bg: true,
+                cursor: MouseCursor.Hand
+            });
+
+            // If there is a keyboard focus, prioritize it over mouse hover
+            // If there is no keyboard focus, show mouse hover
+            if Some(idx) == self.keyboard_focus_index {
+                // Keyboard-selected item is highlighted in blue
+                let color = self.color_focus;
+                script_apply_eval!(cx, item, {
+                    draw_bg.color: #(color)
+                });
+            } else if Some(idx) == self.pointer_hover_index && !has_keyboard_focus {
+                // Mouse-hovered item is highlighted in gray, but only when there is no keyboard focus
+                let color = self.color_hover;
+                script_apply_eval!(cx, item, {
+                    draw_bg.color: #(color)
+                });
+            } else {
+                // Default state
+                script_apply_eval!(cx, item, {
+                    draw_bg.color: #00000000
+                });
+            }
+        }
+    }
+
+    /// Obtain focus in the main `TextInput` widget as soon as possible.
+    pub fn request_text_input_focus(&mut self) {
+        self.is_text_input_focus_pending = true;
+    }
+}
+
+impl CommandTextInputRef {
+    /// See [`CommandTextInput::should_build_items()`].
+    pub fn should_build_items(&self, actions: &Actions) -> bool {
+        self.borrow()
+            .map_or(false, |inner| inner.should_build_items(actions))
+    }
+
+    /// See [`CommandTextInput::clear_items()`].
+    pub fn clear_items(&mut self, cx: &Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.clear_items(cx);
+        }
+    }
+
+    /// See [`CommandTextInput::add_item()`].
+    pub fn add_item(&self, cx: &Cx, widget: WidgetRef) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.add_item(cx, widget);
+        }
+    }
+
+    /// See [`CommandTextInput::add_unselectable_item()`].
+    pub fn add_unselectable_item(&self, cx: &Cx, widget: WidgetRef) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.add_unselectable_item(cx, widget);
+        }
+    }
+
+    /// See [`CommandTextInput::item_selected()`].
+    pub fn item_selected(&self, actions: &Actions) -> Option<WidgetRef> {
+        self.borrow().and_then(|inner| inner.item_selected(actions))
+    }
+
+    /// See [`CommandTextInput::text_input_ref()`].
+    pub fn text_input_ref(&self, cx: &Cx) -> TextInputRef {
+        self.borrow()
+            .map_or(WidgetRef::empty().as_text_input(), |inner| {
+                inner.text_input_ref(cx)
+            })
+    }
+
+    /// See [`CommandTextInput::search_input_ref()`].
+    pub fn search_input_ref(&self, cx: &Cx) -> TextInputRef {
+        self.borrow()
+            .map_or(WidgetRef::empty().as_text_input(), |inner| {
+                inner.search_input_ref(cx)
+            })
+    }
+
+    /// See [`CommandTextInput::reset()`].
+    pub fn reset(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.reset(cx);
+        }
+    }
+
+    /// See [`CommandTextInput::request_text_input_focus()`].
+    pub fn request_text_input_focus(&self) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.request_text_input_focus();
+        }
+    }
+
+    /// See [`CommandTextInput::search_text()`].
+    pub fn search_text(&self, cx: &Cx) -> String {
+        self.borrow()
+            .map_or(String::new(), |inner| inner.search_text(cx))
+    }
+}
+
+fn graphemes(text: &str) -> impl DoubleEndedIterator<Item = &str> {
+    text.graphemes(true)
+}
+
+fn get_head(text_input: &TextInputRef) -> usize {
+    text_input.borrow().map_or(0, |p| p.cursor().index)
+}
+
+fn is_whitespace(grapheme: &str) -> bool {
+    grapheme.chars().all(char::is_whitespace)
+}
+
+/// Reduced and adapted copy of the `List` widget from Moly.
+#[derive(Script, ScriptHook, Widget)]
+struct List {
+    #[deref]
+    deref: View,
+
+    #[rust]
+    area: Area,
+
+    #[rust]
+    items: Vec<WidgetRef>,
+}
+
+impl Widget for List {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.items.iter().for_each(|item| {
+            item.handle_event(cx, event, scope);
+        });
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, self.deref.layout);
+        self.items.iter().for_each(|item| {
+            item.draw_all(cx, scope);
+        });
+        cx.end_turtle_with_area(&mut self.area);
+        DrawStep::done()
+    }
+}
+
+impl List {
+    fn clear(&mut self) {
+        self.items.clear();
+    }
+
+    fn add(&mut self, widget: WidgetRef) {
+        self.items.push(widget);
+    }
+}
+
+impl ListRef {
+    fn clear(&self) {
+        let Some(mut inner) = self.borrow_mut() else {
+            return;
+        };
+
+        inner.clear();
+    }
+
+    fn add(&self, widget: WidgetRef) {
+        let Some(mut inner) = self.borrow_mut() else {
+            return;
+        };
+
+        inner.add(widget);
+    }
+}
diff --git a/src/shared/confirmation_modal.rs b/src/shared/confirmation_modal.rs
index 8ec8f7d1b..56a1d1a64 100644
--- a/src/shared/confirmation_modal.rs
+++ b/src/shared/confirmation_modal.rs
@@ -5,101 +5,98 @@ use std::borrow::Cow;
 use makepad_widgets::*;
 
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
     // A confirmation modal with no icons in the buttons.
     // The accept button is blue and the cancel button is gray.
-    pub ConfirmationModal = {{ConfirmationModal}} {
+    mod.widgets.ConfirmationModal = #(ConfirmationModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        wrapper = <RoundedView> {
+        wrapper := RoundedView {
             width: 400
             height: Fit
-            align: {x: 0.5}
+            align: Align{x: 0.5}
             flow: Down
-            padding: {top: 30, right: 40, bottom: 20, left: 40}
+            padding: Inset{top: 30, right: 40, bottom: 20, left: 40}
 
             show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_PRIMARY))
                 border_radius: 4
             }
 
-            title_view = <View> {
+            title_view := View {
                 width: Fill,
                 height: Fit,
-                padding: {top: 0, bottom: 25}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 25}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                title := Label {
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
             }
 
-            body_view = <View> {
+            body_view := View {
                 width: Fill, height: Fit
-                align: {x: 0.5, y: 0.0}
+                align: Align{x: 0.5, y: 0.0}
 
-                body = <Label> {
+                body := Label {
                     width: Fill, height: Fit
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 11.5},
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 11.5},
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
             }
 
-            buttons_view = <View> {
+            buttons_view := View {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: {top: 20, bottom: 20}
-                margin: {right: -15}
-                align: {x: 1.0, y: 0.5}
+                padding: Inset{top: 20, bottom: 20}
+                margin: Inset{right: -15}
+                align: Align{x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button = <RobrixIconButton> {
+                cancel_button := RobrixIconButton {
                     width: 120,
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15,
-                    icon_walk: {width: 0, height: 0, margin: 0}
+                    icon_walk: Walk{width: 0, height: 0, margin: 0}
     
-                    draw_bg: {
+                    draw_bg +: {
                         border_size: 0.75
-                        border_color: (COLOR_BG_DISABLED),
-                        color: (COLOR_SECONDARY)
+                        border_color: instance((COLOR_BG_DISABLED)),
+                        color: instance((COLOR_SECONDARY))
                     }
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_TEXT),
                     }
                     text: "Cancel"
                 }
 
-                accept_button = <RobrixIconButton> {
+                accept_button := RobrixIconButton {
                     width: 120
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15,
-                    icon_walk: {width: 0, height: 0, margin: 0}
+                    icon_walk: Walk{width: 0, height: 0, margin: 0}
 
-                    draw_bg: {
+                    draw_bg +: {
                         border_size: 0.75
-                        border_color: (COLOR_ACTIVE_PRIMARY_DARKER),
-                        color: (COLOR_ACTIVE_PRIMARY)
+                        border_color: instance((COLOR_ACTIVE_PRIMARY_DARKER)),
+                        color: instance((COLOR_ACTIVE_PRIMARY))
                     }
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_PRIMARY),
                     }
                     text: "Confirm"
@@ -110,78 +107,32 @@ live_design! {
 
     // A confirmation modal for a positive action.
     // The accept button is green with a checkmark icon.
-    pub PositiveConfirmationModal = <ConfirmationModal> {
-        wrapper = {
-            buttons_view = {
-                cancel_button = {
-                    draw_icon: {
-                        svg_file: (ICON_FORBIDDEN)
-                        color: (COLOR_TEXT),
-                    }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
-                }
-                accept_button = {
-                    draw_icon: {
-                        svg_file: (ICON_CHECKMARK)
-                        color: (COLOR_FG_ACCEPT_GREEN),
-                    }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
-
-                    draw_bg: {
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: (COLOR_BG_ACCEPT_GREEN)
-                    }
-                    draw_text: {
-                        color: (COLOR_FG_ACCEPT_GREEN),
-                    }
-                }
-            }
-        }
-    }
+    mod.widgets.PositiveConfirmationModal = mod.widgets.ConfirmationModal {}
 
     // A confirmation modal for a negative action.
     // The accept button is red with a forbidden icon.
-    pub NegativeConfirmationModal = <ConfirmationModal> {
-        wrapper = {
-            buttons_view = {
-                cancel_button = {
-                    draw_icon: {
-                        svg_file: (ICON_FORBIDDEN)
-                        color: (COLOR_TEXT),
-                    }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
-                }
-                accept_button = {
-                    draw_icon: {
-                        svg_file: (ICON_CLOSE)
-                        color: (COLOR_FG_DANGER_RED),
-                    }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
-
-                    draw_bg: {
-                        border_color: (COLOR_FG_DANGER_RED),
-                        color: (COLOR_BG_DANGER_RED)
-                    }
-                    draw_text: {
-                        color: (COLOR_FG_DANGER_RED),
-                    }
-                }
-            }
-        }
-    }
+    mod.widgets.NegativeConfirmationModal = mod.widgets.ConfirmationModal {}
 }
 
 /// Widget actions emitted by the ConfirmationModal.
-#[derive(Clone, Copy, Debug, DefaultNone)]
+#[derive(Clone, Copy, Debug, Default)]
 pub enum ConfirmationModalAction {
     /// Emitted by this modal when it should be closed after the user clicked a button.
     ///
     /// The contained boolean indicates whether the user clicked the
     /// accept button (true) or cancel button (false).
     Close(bool),
+    #[default]
     None
 }
 
+impl ActionDefaultRef for ConfirmationModalAction {
+    fn default_ref() -> &'static Self {
+        static DEFAULT: ConfirmationModalAction = ConfirmationModalAction::None;
+        &DEFAULT
+    }
+}
+
 /// Defines the content and behavior of a confirmation modal.
 ///
 /// Only the title and body text are required.
@@ -225,7 +176,7 @@ impl std::fmt::Debug for ConfirmationModalContent {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct ConfirmationModal {
     #[deref] view: View,
     #[rust] content: ConfirmationModalContent,
@@ -243,9 +194,9 @@ impl Widget for ConfirmationModal {
 }
 
 impl WidgetMatchEvent for ConfirmationModal {
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
-        let accept_button = self.view.button(ids!(accept_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
+        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -257,8 +208,7 @@ impl WidgetMatchEvent for ConfirmationModal {
             // an infinite action feedback loop.
             if cancel_clicked {
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     ConfirmationModalAction::Close(false),
                 );
             }
@@ -274,8 +224,7 @@ impl WidgetMatchEvent for ConfirmationModal {
                 on_accept_clicked(cx);
             }
             cx.widget_action(
-                self.widget_uid(),
-                &scope.path,
+                self.widget_uid(), 
                 ConfirmationModalAction::Close(true),
             );
         }
@@ -289,21 +238,21 @@ impl ConfirmationModal {
     }
 
     fn apply_content(&mut self, cx: &mut Cx) {
-        self.view.label(ids!(title)).set_text(cx, &self.content.title_text);
-        self.view.label(ids!(body)).set_text(cx, &self.content.body_text);
-        self.view.button(ids!(accept_button)).set_text(
+        self.view.label(cx, ids!(title)).set_text(cx, &self.content.title_text);
+        self.view.label(cx, ids!(body)).set_text(cx, &self.content.body_text);
+        self.view.button(cx, ids!(accept_button)).set_text(
             cx,
             self.content.accept_button_text.as_deref().unwrap_or("Confirm"),
         );
-        self.view.button(ids!(cancel_button)).set_text(
+        self.view.button(cx, ids!(cancel_button)).set_text(
             cx,
             self.content.cancel_button_text.as_deref().unwrap_or("Cancel"),
         );
 
-        self.view.button(ids!(cancel_button)).reset_hover(cx);
-        self.view.button(ids!(accept_button)).reset_hover(cx);
-        self.view.button(ids!(accept_button)).set_enabled(cx, true);
-        self.view.button(ids!(cancel_button)).set_enabled(cx, true);
+        self.view.button(cx, ids!(cancel_button)).reset_hover(cx);
+        self.view.button(cx, ids!(accept_button)).reset_hover(cx);
+        self.view.button(cx, ids!(accept_button)).set_enabled(cx, true);
+        self.view.button(cx, ids!(cancel_button)).set_enabled(cx, true);
         self.view.redraw(cx);
     }
 }
diff --git a/src/shared/helpers.rs b/src/shared/helpers.rs
index 32d45f6c1..18d082cd6 100644
--- a/src/shared/helpers.rs
+++ b/src/shared/helpers.rs
@@ -1,55 +1,50 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
-    use link::shaders::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.TitleLabel = Label {
 
-    use crate::shared::styles::*;
 
-    pub TitleLabel = <Label> {
         width: Fill, height: Fit
-        margin: {top: 5},
-        flow: RightWrap,
-        draw_text: {
-            text_style: <TITLE_TEXT>{font_size: 15},
+        margin: Inset{top: 5},
+        flow: Flow.Right{wrap: true},
+        draw_text +: {
+            text_style: TITLE_TEXT {font_size: 15},
             color: #000
-            wrap: Word
+            flow: Flow.Right{wrap: true}
         }
     }
 
-    pub SubsectionLabel = <Label> {
+    mod.widgets.SubsectionLabel = Label {
+
         width: Fill, height: Fit
-        margin: {top: 5},
+        margin: Inset{top: 5},
         flow: Right,
-        draw_text: {
+        draw_text +: {
             color: (COLOR_TEXT),
-            text_style: <THEME_FONT_BOLD>{ font_size: 13 },
+            text_style: theme.font_bold { font_size: 13 },
         }
     }
 
-    // Copied from Moly
-    pub FadeView = <CachedView> {
-        draw_bg: {
-            instance opacity: 1.0
+    // Keep FadeView as a simple View to avoid custom cached-shader compile failures.
+    // This preserves layout/behavior while we stay compatible with current script runtime.
+    mod.widgets.FadeView = View {}
 
-            fn pixel(self) -> vec4 {
-                let color = sample2d_rt(self.image, self.pos * self.scale + self.shift);
-                return Pal::premul(vec4(color.xyz, color.w * self.opacity))
-            }
-        }
-    }
+    mod.widgets.LineH = RoundedView {
 
-    pub LineH = <RoundedView> {
         width: Fill,
         height: 2.0,
         margin: 0.0,
         padding: 0.0, spacing: 0.0
         show_bg: true
-        draw_bg: {color: (COLOR_DIVIDER_DARK)}
+        draw_bg +: {color: instance((COLOR_DIVIDER_DARK))}
     }
 
-    pub Filler  = <View> { width: Fill, height: Fill }
-    pub FillerX = <View> { width: Fill, height: Fit }
-    pub FillerY = <View> { width: Fit,  height: Fill }
+    mod.widgets.Filler = View { width: Fill, height: Fill }
+
+    mod.widgets.FillerX = View { width: Fill, height: Fit }
+    mod.widgets.FillerY = View { width: Fit,  height: Fill }
 }
diff --git a/src/shared/html_or_plaintext.rs b/src/shared/html_or_plaintext.rs
index 4dc1ae2b5..8acd46294 100644
--- a/src/shared/html_or_plaintext.rs
+++ b/src/shared/html_or_plaintext.rs
@@ -1,48 +1,51 @@
 //! A `HtmlOrPlaintext` view can display either plaintext or rich HTML content.
 
-use makepad_widgets::{makepad_html::HtmlDoc, *};
+use makepad_widgets::*;
 use matrix_sdk::{ruma::{matrix_uri::MatrixId, OwnedMxcUri}, OwnedServerName};
 
-use crate::{avatar_cache::{self, AvatarCacheEntry}, profile::user_profile_cache, sliding_sync::{current_user_id, submit_async_request, MatrixRequest}, utils};
+use crate::{ApplyOverCompat, avatar_cache::{self, AvatarCacheEntry}, profile::user_profile_cache, sliding_sync::{current_user_id, submit_async_request, MatrixRequest}, utils};
 
 use super::avatar::AvatarWidgetExt;
 
 /// The color of the text used to print the spoiler reason before the hidden text.
 const COLOR_SPOILER_REASON: Vec4 = vec4(0.6, 0.6, 0.6, 1.0);
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.BaseLinkPill = RoundedView {
 
-    use crate::shared::styles::*;
-    use crate::shared::avatar::Avatar;
 
-    BaseLinkPill = <RoundedView> {
         width: Fit, height: Fit,
         flow: Right,
-        align: { y: 0.5 }
-        padding: { left: 7, right: 7, bottom: 5, top: 5 }
+        align: Align{ y: 0.5 }
+        padding: Inset{ left: 7, right: 7, bottom: 5, top: 5 }
         spacing: 5.0,
 
         show_bg: true,
-        draw_bg: {
-            color: #000,
+        draw_bg +: {
+            color: instance(#000),
             border_radius: 7.0,
         }
 
-        avatar = <Avatar> {
+        avatar := Avatar {
             height: 18.0, width: 18.0,
-            text_view = { text = { draw_text: {
-                text_style: <TITLE_TEXT>{ font_size: 10.0 }
-            }}}
+            text_view +: {
+                text +: {
+                    draw_text +: {
+                        text_style: TITLE_TEXT { font_size: 10.0 }
+                    }
+                }
+            }
         }
 
-        title = <Label> {
+        title := Label {
             flow: Right, // do not wrap
-            draw_text: {
+            draw_text +: {
                 color: #f,
-                text_style: <MESSAGE_TEXT_STYLE> { font_size: 10.0 },
+                text_style: MESSAGE_TEXT_STYLE { font_size: 10.0 },
             }
             text: "Unknown",
         }
@@ -50,59 +53,75 @@ live_design! {
 
     // A pill-shaped widget that displays a Matrix link,
     // either a link to a user, a room, or a message in a room.
-    MatrixLinkPill = {{MatrixLinkPill}}<BaseLinkPill> { }
+    mod.widgets.MatrixLinkPill = #(MatrixLinkPill::register_widget(vm)) { }
 
     // A RobrixHtmlLink is either a regular Html link (default) or a Matrix link.
     // The Matrix link is a pill-shaped widget with an avatar and a title.
-    pub RobrixHtmlLink = {{RobrixHtmlLink}} {
+    mod.widgets.RobrixHtmlLink = #(RobrixHtmlLink::register_widget(vm)) {
         width: Fit, height: Fit,
-        flow: RightWrap, // ensure the link text can wrap
-        align: { y: 0.5 },
-        cursor: Hand,
+        flow: Flow.Right{wrap: true}, // ensure the link text can wrap
+        align: Align{ y: 0.5 },
+        cursor: MouseCursor.Hand,
 
-        html_link_view = <View> {
+        html_link_view := View {
             visible: true,
             width: Fit, height: Fit,
-            flow: RightWrap,
+            flow: Flow.Right{wrap: true},
 
-            html_link = <HtmlLink> {
+            html_link := HtmlLink {
                 hover_color: (COLOR_LINK_HOVER)
                 grab_key_focus: false,
-                padding: {left: 1.0, right: 1.5},
+                padding: Inset{left: 1.0, right: 1.5},
             }
         }
 
-        matrix_link_view = <View> {
-            visible: false
-            width: Fit, height: Fit,
+            matrix_link_view := View {
+                visible: false
+                width: Fit, height: Fit,
 
-            matrix_link = <MatrixLinkPill> { }
+            matrix_link := mod.widgets.MatrixLinkPill { }
         }
     }
 
     // This is an HTML subwidget used to handle `<font>` and `<span>` tags,
     // specifically: foreground text color, background color, and spoilers.
-    pub MatrixHtmlSpan = {{MatrixHtmlSpan}} {
+    mod.widgets.MatrixHtmlSpan = #(MatrixHtmlSpan::register_widget(vm)) {
         width: Fit, height: Fit,
-        align: {x: 0., y: 0.}
+        align: Align{x: 0., y: 0.}
     }
 
 
     // A centralized widget where we define styles and custom elements for HTML
     // message content. This is a wrapper around Makepad's built-in `Html` widget.
-    pub MessageHtml = <Html> {
+    mod.widgets.MessageHtml = Html {
         padding: 0.0,
         width: Fill, height: Fit, // see comment in `HtmlOrPlaintext`
-        flow: RightWrap,
-        align: { y: 0.5 }
+        flow: Flow.Right{wrap: true},
+        align: Align{ y: 0.5 }
         font_size: (MESSAGE_FONT_SIZE),
         font_color: (MESSAGE_TEXT_COLOR),
-        draw_normal:      { color: (MESSAGE_TEXT_COLOR), text_style: { line_spacing: (MESSAGE_TEXT_LINE_SPACING) } }
-        draw_italic:      { color: (MESSAGE_TEXT_COLOR), text_style: { line_spacing: (MESSAGE_TEXT_LINE_SPACING) } }
-        draw_bold:        { color: (MESSAGE_TEXT_COLOR), text_style: { line_spacing: (MESSAGE_TEXT_LINE_SPACING) } }
-        draw_bold_italic: { color: (MESSAGE_TEXT_COLOR), text_style: { line_spacing: (MESSAGE_TEXT_LINE_SPACING) } }
-        draw_fixed:       { color: (MESSAGE_TEXT_COLOR), text_style: { line_spacing: (MESSAGE_TEXT_LINE_SPACING) } }
-        draw_block: {
+        draw_text +: { color: (MESSAGE_TEXT_COLOR) }
+        text_style_normal: mod.widgets.MESSAGE_TEXT_STYLE {
+            font_size: (MESSAGE_FONT_SIZE)
+            line_spacing: (MESSAGE_TEXT_LINE_SPACING)
+        }
+        text_style_italic: theme.font_italic {
+            font_size: (MESSAGE_FONT_SIZE)
+            line_spacing: (MESSAGE_TEXT_LINE_SPACING)
+        }
+        text_style_bold: theme.font_bold {
+            font_size: (MESSAGE_FONT_SIZE)
+            line_spacing: (MESSAGE_TEXT_LINE_SPACING)
+        }
+        text_style_bold_italic: theme.font_bold_italic {
+            font_size: (MESSAGE_FONT_SIZE)
+            line_spacing: (MESSAGE_TEXT_LINE_SPACING)
+        }
+        text_style_fixed: theme.font_code {
+            font_size: (MESSAGE_FONT_SIZE)
+            line_spacing: (MESSAGE_TEXT_LINE_SPACING)
+        }
+        draw_block +: {
             line_color: (MESSAGE_TEXT_COLOR)
             sep_color: (MESSAGE_TEXT_COLOR)
             code_color: (#EDEDED)
@@ -110,25 +129,25 @@ live_design! {
             quote_fg_color: (MESSAGE_TEXT_COLOR)
         }
 
-        quote_layout: { spacing: 0, padding: {left: 15, top: 10.0, bottom: 10.0}, }
-        quote_walk: { margin: { top: 5, bottom: 5, left: 0 } }
+        quote_layout: Layout{ spacing: 0, padding: Inset{left: 15, top: 10.0, bottom: 10.0}, }
+        quote_walk: Walk{ margin: Inset{ top: 5, bottom: 5, left: 0 } }
 
-        sep_walk: { margin: { top: 10, bottom: 10 } }
+        sep_walk: Walk{ margin: Inset{ top: 10, bottom: 10 } }
 
-        list_item_layout: { padding: {left: 5.0, top: 1.0, bottom: 1.0}, }
-        list_item_walk: { margin: { left: 0, right: 0, top: 3, bottom: 3 } }
-        code_layout: { padding: {top: 15.0, bottom: 15.0, left: 15, right: 5 } }
-        code_walk: { margin: { top: 10, bottom: 10, left: 0, right: 0 } }
+        list_item_layout: Layout{ padding: Inset{left: 5.0, top: 1.0, bottom: 1.0}, }
+        list_item_walk: Walk{ margin: Inset{ left: 0, right: 0, top: 3, bottom: 3 } }
+        code_layout: Layout{ padding: Inset{top: 15.0, bottom: 15.0, left: 15, right: 5 } }
+        code_walk: Walk{ margin: Inset{ top: 10, bottom: 10, left: 0, right: 0 } }
 
-        heading_margin: { top: 1.0, bottom: 0.1 }
-        paragraph_margin: { top: 0.33, bottom: 0.33 }
+        heading_margin: Inset{ top: 1.0, bottom: 0.1 }
+        paragraph_margin: Inset{ top: 0.33, bottom: 0.33 }
 
-        inline_code_padding: {top: 3, bottom: 3, left: 4, right: 4 }
-        inline_code_margin: { left: 3, right: 3, bottom: 2, top: 2 }
+        inline_code_padding: Inset{top: 3, bottom: 3, left: 4, right: 4 }
+        inline_code_margin: Inset{ left: 3, right: 3, bottom: 2, top: 2 }
 
-        font = <MatrixHtmlSpan> { }
-        span = <MatrixHtmlSpan> { }
-        a = <RobrixHtmlLink> { }
+        font := mod.widgets.MatrixHtmlSpan { }
+        span := mod.widgets.MatrixHtmlSpan { }
+        a := mod.widgets.RobrixHtmlLink { }
 
         body: "[<i>HTML message placeholder</i>]",
     }
@@ -143,34 +162,33 @@ live_design! {
     // * They also need their height to be Fit along with all of their parent views,
     //   otherwise their total height will be zero (when a Fit is inside of a Fill),
     //   resulting in nothing being displayed.
-    pub HtmlOrPlaintext = {{HtmlOrPlaintext}} {
+    mod.widgets.HtmlOrPlaintext = #(HtmlOrPlaintext::register_widget(vm)) {
         width: Fill, height: Fit, // see above comment
         flow: Overlay
 
-        plaintext_view = <View> {
+        plaintext_view := View {
             visible: true,
             width: Fill, height: Fit, // see above comment
-            pt_label = <Label> {
+            pt_label := Label {
                 width: Fill, height: Fit, // see above comment
-                flow: RightWrap,
+                flow: Flow.Right{wrap: true},
                 padding: 0,
-                draw_text: {
-                    wrap: Word,
+                draw_text +: {
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE> { font_size: (MESSAGE_FONT_SIZE) },
+                    text_style: mod.widgets.MESSAGE_TEXT_STYLE { font_size: (MESSAGE_FONT_SIZE) },
                 }
             }
         }
 
-        html_view = <View> {
+        html_view := View {
             visible: false,
             width: Fill, height: Fit, // see above comment
-            html = <MessageHtml> {}
+            html := mod.widgets.MessageHtml {}
         }
     }
 }
 
-#[derive(Debug, Clone, DefaultNone)]
+#[derive(Debug, Clone, Default)]
 pub enum RobrixHtmlLinkAction{
     ClickedMatrixLink {
         /// The URL of the link, which is only temporarily needed here
@@ -180,13 +198,14 @@ pub enum RobrixHtmlLinkAction{
         via: Vec<OwnedServerName>,
         key_modifiers: KeyModifiers,
     },
+    #[default]
     None,
 }
 
 /// A RobrixHtmlLink is either a regular `HtmlLink` (default) or a Matrix link.
 ///
 /// Matrix links are displayed using the [`MatrixLinkPill`] widget.
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 struct RobrixHtmlLink {
     #[deref] view: View,
 
@@ -199,19 +218,6 @@ struct RobrixHtmlLink {
     #[live] pub url: String,
 }
 
-impl LiveHook for RobrixHtmlLink {
-    fn after_apply(&mut self, _cx: &mut Cx, apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
-        if let ApplyFrom::NewFromDoc { .. } = apply.from {
-            let scope = apply.scope.as_ref().unwrap();
-            let doc = scope.props.get::<HtmlDoc>().unwrap();
-            let mut walker = doc.new_walker_with_index(scope.index + 1);
-            if let Some((id!(href), attr)) = walker.while_attr_lc() {
-                self.url = attr.into();
-            }
-        }
-    }
-}
-
 impl Widget for RobrixHtmlLink {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope)
@@ -247,24 +253,24 @@ impl Widget for RobrixHtmlLink {
 impl RobrixHtmlLink {
     #[allow(unused)]
     fn draw_matrix_pill(&mut self, cx: &mut Cx, matrix_id: &MatrixId, via: &[OwnedServerName]) {
-        if let Some(mut pill) = self.matrix_link_pill(ids!(matrix_link)).borrow_mut() {
+        if let Some(mut pill) = self.matrix_link_pill(cx, ids!(matrix_link)).borrow_mut() {
             pill.populate_pill(cx, self.url.clone(), matrix_id, via);
         }
-        self.view(ids!(matrix_link_view)).set_visible(cx, true);
-        self.view(ids!(html_link_view)).set_visible(cx, false);
+        self.view(cx, ids!(matrix_link_view)).set_visible(cx, true);
+        self.view(cx, ids!(html_link_view)).set_visible(cx, false);
     }
 
     /// Shows the inner plain HTML link and hides the Matrix link pill view.
     fn draw_html_link(&mut self, cx: &mut Cx) {
-        self.view(ids!(html_link_view)).set_visible(cx, true);
-        self.view(ids!(matrix_link_view)).set_visible(cx, false);
-        let mut html_link = self.html_link(ids!(html_link));
+        self.view(cx, ids!(html_link_view)).set_visible(cx, true);
+        self.view(cx, ids!(matrix_link_view)).set_visible(cx, false);
+        let mut html_link = self.html_link(cx, ids!(html_link));
         html_link.set_url(&self.url);
         html_link.set_text(cx, self.text.as_ref());
     }
 }
 
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum MatrixLinkPillState {
     Requested,
     Loaded {
@@ -272,13 +278,14 @@ pub enum MatrixLinkPillState {
         name: String,
         avatar_url: Option<OwnedMxcUri>,
     },
+    #[default]
     None,
 }
 
 /// A pill-shaped widget that shows a Matrix link as an avatar and a title.
 ///
 /// This can be a link to a user, a room, or a message in a room.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 struct MatrixLinkPill {
     #[deref] view: View,
 
@@ -289,7 +296,7 @@ struct MatrixLinkPill {
 }
 
 impl Widget for MatrixLinkPill {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, _scope: &mut Scope) {
         if let Event::Actions(actions) = event {
             for action in actions {
                 if let Some(loaded @ MatrixLinkPillState::Loaded { matrix_id, .. }) = action.downcast_ref() {
@@ -310,8 +317,7 @@ impl Widget for MatrixLinkPill {
             if fe.is_over && fe.is_primary_hit() && fe.was_tap() {
                 if let Some(matrix_id) = self.matrix_id.clone() {
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         RobrixHtmlLinkAction::ClickedMatrixLink {
                             matrix_id,
                             via: self.via.clone(),
@@ -329,11 +335,14 @@ impl Widget for MatrixLinkPill {
     }
 
     fn text(&self) -> String {
-        self.label(ids!(title)).text()
+        match &self.state {
+            MatrixLinkPillState::Loaded { name, .. } => name.clone(),
+            _ => String::new(),
+        }
     }
 
     fn set_text(&mut self, cx: &mut Cx, v: &str) {
-        self.label(ids!(title)).set_text(cx, v);
+        self.label(cx, ids!(title)).set_text(cx, v);
     }
 }
 
@@ -348,8 +357,8 @@ impl MatrixLinkPill {
         if let MatrixId::User(user_id) = matrix_id {
             // Apply red background for current user
             if current_user_id().is_some_and(|u| &u == user_id) {
-                self.apply_over(cx, live! {
-                    draw_bg: { color: #d91b38 }
+                self.view.apply_over(cx, live!{
+                    draw_bg: { color: instance(#d91b38)}
                 });
             }
 
@@ -375,7 +384,7 @@ impl MatrixLinkPill {
         // Handle room ID or alias
         match &self.state {
             MatrixLinkPillState::Loaded { name, avatar_url, .. } => {
-                self.label(ids!(title)).set_text(cx, name);
+                self.label(cx, ids!(title)).set_text(cx, name);
                 self.populate_avatar(cx, avatar_url.as_ref());
                 return;
             }
@@ -399,7 +408,7 @@ impl MatrixLinkPill {
     }
 
     fn populate_avatar(&self, cx: &mut Cx, avatar_url: Option<&OwnedMxcUri>) {
-        let avatar_ref = self.avatar(ids!(avatar));
+        let avatar_ref = self.avatar(cx, ids!(avatar));
         if let Some(avatar_url) = avatar_url {
             if let AvatarCacheEntry::Loaded(data) = avatar_cache::get_or_fetch_avatar(cx, avatar_url) {
                 let res = avatar_ref.show_image(
@@ -429,7 +438,7 @@ impl MatrixLinkPillRef {
 }
 
 /// A widget used to display a single HTML `<span>` tag or a `<font>` tag.
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 struct MatrixHtmlSpan {
     // TODO: this is unused; just here to invalidly satisfy the area provider.
     //       I'm not sure how to implement `fn area()` given that it has multiple area rects.
@@ -491,36 +500,6 @@ impl SpoilerDisplay {
     }
 }
 
-impl LiveHook for MatrixHtmlSpan {
-    // After an MatrixHtmlSpan instance has been instantiated ("applied"),
-    // populate its struct fields from the `<span>` or `<font>` tag's attributes.
-    fn after_apply(&mut self, _cx: &mut Cx, apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
-        // The attributes we care about (we allow all attributes in both tags):
-        // * in `<font>` tags: `color`
-        // * in `<span>` tags: `data-mx-color`, `data-mx-bg-color`, `data-mx-spoiler`
-
-        if let ApplyFrom::NewFromDoc {..} = apply.from {
-            if let Some(scope) = apply.scope.as_ref() {
-                if let Some(doc) = scope.props.get::<HtmlDoc>() {
-                    let mut walker = doc.new_walker_with_index(scope.index + 1);
-                    while let Some((lc, attr)) = walker.while_attr_lc() {
-                        let attr = attr.trim_matches(['"', '\'']);
-                        match lc {
-                            id!(color)
-                            | id!(data-mx-color) => self.fg_color = Vec4::from_hex_str(attr).ok(),
-                            id!(data-mx-bg-color) => self.bg_color = Vec4::from_hex_str(attr).ok(),
-                            id!(data-mx-spoiler) => self.spoiler = SpoilerDisplay::Hidden { reason: attr.into() },
-                            _ => ()
-                        }
-                    }
-                }
-            } else {
-                error!("BUG: MatrixHtmlSpan::after_apply(): scope not found, cannot set attributes.");
-            }
-        }
-    }
-}
-
 impl Widget for MatrixHtmlSpan {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, _scope: &mut Scope) {
         let mut needs_redraw = false;
@@ -643,8 +622,9 @@ impl Widget for MatrixHtmlSpan {
 }
 
 
-#[derive(LiveHook, Live, Widget)]
+#[derive(ScriptHook, Script, Widget)]
 pub struct HtmlOrPlaintext {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 }
 
@@ -661,16 +641,16 @@ impl Widget for HtmlOrPlaintext {
 impl HtmlOrPlaintext {
     /// Sets the plaintext content and makes it visible, hiding the rich HTML content.
     pub fn show_plaintext<T: AsRef<str>>(&mut self, cx: &mut Cx, text: T) {
-        self.view(ids!(html_view)).set_visible(cx, false);
-        self.view(ids!(plaintext_view)).set_visible(cx, true);
-        self.label(ids!(plaintext_view.pt_label)).set_text(cx, text.as_ref());
+        self.view(cx, ids!(html_view)).set_visible(cx, false);
+        self.view(cx, ids!(plaintext_view)).set_visible(cx, true);
+        self.label(cx, ids!(plaintext_view.pt_label)).set_text(cx, text.as_ref());
     }
 
     /// Sets the HTML content, making the HTML visible and the plaintext invisible.
     pub fn show_html<T: AsRef<str>>(&mut self, cx: &mut Cx, html_body: T) {
-        self.html(ids!(html_view.html)).set_text(cx, html_body.as_ref());
-        self.view(ids!(html_view)).set_visible(cx, true);
-        self.view(ids!(plaintext_view)).set_visible(cx, false);
+        self.html(cx, ids!(html_view.html)).set_text(cx, html_body.as_ref());
+        self.view(cx, ids!(html_view)).set_visible(cx, true);
+        self.view(cx, ids!(plaintext_view)).set_visible(cx, false);
     }
 }
 
diff --git a/src/shared/icon_button.rs b/src/shared/icon_button.rs
index 8030d113f..724bba0b2 100644
--- a/src/shared/icon_button.rs
+++ b/src/shared/icon_button.rs
@@ -1,52 +1,53 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
 
-    COLOR_BRAND = #x5
-    COLOR_BRAND_HOVER = #x3
-    COLOR_META_TEXT = #xaaa
+    mod.widgets.COLOR_BRAND = #x5
+    mod.widgets.COLOR_BRAND_HOVER = #x3
+    mod.widgets.COLOR_META_TEXT = #xaaa
 
-    pub IconButton = <Button> {
-        draw_text: {
-            instance hover: 0.0
-            instance down: 0.0
-            text_style: {
+    mod.widgets.IconButton = Button {
+
+        draw_text +: {
+            hover: instance(0.0)
+            down: instance(0.0)
+            text_style: theme.font_regular {
                 font_size: 11.0
             }
-            fn get_color(self) -> vec4 {
+            get_color: fn() -> vec4 {
                 return mix(
                     mix(
-                        (COLOR_META_TEXT),
-                        (COLOR_BRAND),
+                        (mod.widgets.COLOR_META_TEXT),
+                        (mod.widgets.COLOR_BRAND),
                         self.hover
                     ),
-                    (COLOR_BRAND_HOVER),
+                    (mod.widgets.COLOR_BRAND_HOVER),
                     self.down
                 )
             }
         }
-        draw_icon: {
-            fn get_color(self) -> vec4 {
+        draw_icon +: {
+            hover: instance(0.0)
+            down: instance(0.0)
+            get_color: fn() -> vec4 {
                 return mix(
                     mix(
-                        (COLOR_META),
-                        (COLOR_BRAND),
+                        (mod.widgets.COLOR_META),
+                        (mod.widgets.COLOR_BRAND),
                         self.hover
                     ),
-                    (COLOR_BRAND_HOVER),
+                    (mod.widgets.COLOR_BRAND_HOVER),
                     self.down
                 )
             }
         }
-        icon_walk: {width: 7.5, height: Fit, margin: {left: 5.0}}
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+        icon_walk: Walk{width: 7.5, height: Fit, margin: Inset{left: 5.0}}
+        draw_bg +: {
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 return sdf.result
             }
         }
@@ -57,28 +58,28 @@ live_design! {
 
     // Customized button widget, based on the RoundedView shaders with some modifications
     // which is a better fit with our application UI design
-    pub RobrixIconButton = <Button> {
+    mod.widgets.RobrixIconButton = Button {
         width: Fit,
         height: Fit,
         spacing: 10,
         padding: 10,
-        align: {x: 0, y: 0.5}
+        align: Align{x: 0, y: 0.5}
 
-        draw_bg: {
-            instance color: (COLOR_PRIMARY)
+        draw_bg +: {
+            color: (mod.widgets.COLOR_PRIMARY)
             // We set a mid-gray hover color, which gets mixed with the bg color itself
             // in order to create a "lightening" effect upon hover.
-            instance color_hover: #A
-            instance border_size: 0.0
-            instance border_color: #D0D5DD
-            instance border_radius: 4.0
+            color_hover: #A
+            border_size: 0.0
+            border_color: #D0D5DD
+            border_radius: 4.0
 
-            fn get_color(self) -> vec4 {
+            get_color: fn() -> vec4 {
                 return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
             }
 
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                 sdf.box(
                     self.border_size,
                     self.border_size,
@@ -94,21 +95,23 @@ live_design! {
             }
         }
 
-        draw_icon: {
-            instance color: #000
-            instance color_hover: #000
-            fn get_color(self) -> vec4 {
+        draw_icon +: {
+            hover: instance(0.0)
+            color: #000
+            color_hover: uniform(#000)
+            get_color: fn() -> vec4 {
                 return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
             }
         }
-        icon_walk: {width: 16, height: 16}
+        icon_walk: Walk{width: 16, height: 16}
 
-        draw_text: {
-            text_style: <REGULAR_TEXT>{font_size: 10},
+        draw_text +: {
             color: #000
-            fn get_color(self) -> vec4 {
+            color_hover: #000
+            get_color: fn() -> vec4 {
                 return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
             }
+            text_style: mod.widgets.REGULAR_TEXT {font_size: 10},
         }
         text: ""
     }
diff --git a/src/shared/image_viewer.rs b/src/shared/image_viewer.rs
index caf9fc0af..98a725ee6 100644
--- a/src/shared/image_viewer.rs
+++ b/src/shared/image_viewer.rs
@@ -8,12 +8,15 @@ use chrono::{DateTime, Local};
 use makepad_widgets::{
     event::TouchUpdateEvent,
     image_cache::{ImageBuffer, ImageError},
-    rotated_image::RotatedImageWidgetExt,
     *,
 };
 use matrix_sdk_ui::timeline::EventTimelineItem;
 use thiserror::Error;
-use crate::{shared::{avatar::AvatarWidgetExt, timestamp::TimestampWidgetRefExt}, sliding_sync::TimelineKind};
+use crate::{
+    ApplyOverCompat,
+    shared::{avatar::AvatarWidgetExt, timestamp::TimestampWidgetRefExt},
+    sliding_sync::TimelineKind,
+};
 
 /// The timeout for hiding the UI overlays after no user mouse/tap activity.
 const SHOW_UI_DURATION: f64 = 3.0;
@@ -102,164 +105,163 @@ impl Default for DragState {
     }
 }
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::timestamp::Timestamp;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.UI_ANIMATION_DURATION_SECS = 0.5
+
+    mod.widgets.ROTATION_ANIMATION_DURATION_SECS = 0.2
 
-    UI_ANIMATION_DURATION_SECS = 0.5
-    ROTATION_ANIMATION_DURATION_SECS = 0.2
+    mod.widgets.ImageViewerButton = RobrixIconButton {
 
-    ImageViewerButton = <RobrixIconButton> {
         width: 44, height: 44
-        align: {x: 0.5, y: 0.5},
+        align: Align{x: 0.5, y: 0.5},
         spacing: 0, 
         padding: 0,
-        draw_bg: {
-            color: (COLOR_SECONDARY * 0.925)
+        draw_bg +: {
+            color: instance((COLOR_SECONDARY * 0.925))
         }
-        draw_icon: {
-            svg_file: (ICON_ZOOM_OUT),
-            fn get_color(self) -> vec4 {
+        draw_icon +: {
+            svg: (ICON_ZOOM_OUT),
+            get_color: fn() -> vec4 {
                 return #x0;
             }
         }
-        icon_walk: {width: 27, height: 27}
+        icon_walk: Walk{width: 27, height: 27}
     }
 
-    pub ImageViewer = {{ImageViewer}} {
+    mod.widgets.ImageViewer = set_type_default() do #(ImageViewer::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: Fill, height: Fill,
         flow: Overlay
         show_bg: true
-        draw_bg: {
-            color: (COLOR_IMAGE_VIEWER_BACKGROUND)
-        }
+        draw_bg.color: (COLOR_IMAGE_VIEWER_BACKGROUND)
 
-        image_layer = <View> {
+        image_layer := View {
             width: Fill, height: Fill,
-            align: {x: 0.5, y: 0.5}
+            align: Align{x: 0.5, y: 0.5}
             flow: Down
 
-            rotated_image_container = <View> {
+            rotated_image_container := View {
                 width: Fill, height: Fill,
                 flow: Down
-                align: {x: 0.5, y: 0.5}
-                rotated_image = <RotatedImage> {
+                align: Align{x: 0.5, y: 0.5}
+                rotated_image := Image {
                     width: Fill, height: Fill,
-                    draw_bg: {
-                        rotation: 0.0
-                        opacity: 1.0
-                    }
+                    fit: ImageFit.Smallest
                 }
             }
 
-            footer = <View> {
+            footer := View {
                 width: Fill, height: 50,
                 flow: Right
                 padding: 10
-                align: {x: 0.5, y: 0.8}
+                align: Align{x: 0.5, y: 0.8}
                 spacing: 10
 
-                image_viewer_loading_spinner_view = <View> {
+                image_viewer_loading_spinner_view := View {
                     width: Fit, height: Fit
 
-                    loading_spinner = <LoadingSpinner> {
+                    loading_spinner := LoadingSpinner {
                         width: 40, height: 40,
-                        draw_bg: {
-                            color: (COLOR_TEXT)
+                        draw_bg +: {
+                            color: instance((COLOR_TEXT))
                             border_size: 3.0,
                         }
                     }
                 }
 
-                image_viewer_forbidden_view = <View> {
+                image_viewer_forbidden_view := View {
                     width: Fit, height: Fit
                     visible: false
-                    <Icon> {
-                        draw_icon: {
-                            svg_file: (ICON_FORBIDDEN),
+                    Icon {
+                        draw_icon +: {
+                            svg: (ICON_FORBIDDEN),
                             color: (COLOR_TEXT),
                         }
-                        icon_walk: { width: 30, height: 30 }
+                        icon_walk: Walk{ width: 30, height: 30 }
                     }
                 }
 
-                image_viewer_status_label = <Label> {
+                image_viewer_status_label := Label {
                     width: Fit, height: 30,
                     text: "Loading image...",
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 14},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 14},
                         color: (COLOR_TEXT)
                     }
                 }
             }
         }
 
-        metadata_view = <View> {
+        metadata_view := View {
             width: Fill, height: Fill,
             margin: 20,
-            align: {x: 0.0, y: 1.0},
-            metadata_rounded_view = <RoundedView> {
+            align: Align{x: 0.0, y: 1.0},
+            metadata_rounded_view := RoundedView {
                 width: Fill, height: Fit
                 flow: Right
-                align: {y: 0.5, x: 0.0}
+                align: Align{y: 0.5, x: 0.0}
                 padding: 13
                 spacing: 8,
 
                 show_bg: true
-                draw_bg: {
+                draw_bg +: {
                     border_radius: 4.0
-                    color: (COLOR_IMAGE_VIEWER_META_BACKGROUND)
+                    color: instance((COLOR_IMAGE_VIEWER_META_BACKGROUND))
                 }
 
                 // Display user profile view below the button group when the width is not enough.
-                user_profile_view = <View> {
-                    width: Fit { max: 200 }
+                user_profile_view := View {
+                    width: 200
                     height: Fit,
                     flow: Right,
                     spacing: 13,
-                    align: { y: 0.5 }
+                    align: Align{ y: 0.5 }
                     
-                    avatar = <Avatar> {
+                    avatar := Avatar {
                         width: 45, height: 45,
-                        text_view = { text = { draw_text: {
-                            text_style: <TITLE_TEXT>{ font_size: 15.0 }
-                        }}}
+                        text_view +: {
+                            text +: {
+                                draw_text +: {
+                                    text_style: TITLE_TEXT { font_size: 15.0 }
+                                }
+                            }
+                        }
                     }
 
-                    content = <View> {
+                    content := View {
                         width: Fit
                         height: Fit,
-                        align: { y: 0.5 }
+                        align: Align{ y: 0.5 }
                         spacing: 3
                         flow: Down,
 
-                        username = <Label> {
+                        username := Label {
                             width: Fit
                             height: Fit,
                             padding: 0
                             margin: 0
                             flow: Right
-                            draw_text: {
-                                text_style: <REGULAR_TEXT>{font_size: 12},
+                            draw_text +: {
+                                text_style: REGULAR_TEXT {font_size: 12},
                                 color: (COLOR_TEXT)
-                                wrap: Ellipsis
+                                flow: Flow.Right{wrap: true}
                             }
                         }
 
-                        timestamp_view = <View> {
+                        timestamp_view := View {
                             width: Fit
                             height: Fit
 
-                            timestamp = <Timestamp> {
+                            timestamp := Timestamp {
                                 width: Fit,
                                 height: Fit,
-                                ts_label = {
-                                    draw_text: {
-                                        text_style: {font_size: 9.5},
+                                ts_label := Label {
+                                    draw_text +: {
+                                        text_style: theme.font_regular {font_size: 9.5},
                                         color: (COLOR_TEXT)
                                     }
                                 }
@@ -269,185 +271,137 @@ live_design! {
                 }
 
                 // Display image name and size below the user_profile_view if the width is not enough.
-                image_name_and_size_view = <View> {
+                image_name_and_size_view := View {
                     width: Fill
                     height: Fit,
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     flow: Right
-                    image_name_and_size = <Label> {
+                    image_name_and_size := Label {
                         width: Fill,
                         height: Fit,
-                        align: {x: 0.5, y: 0.5}
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{font_size: 13},
+                        align: Align{x: 0.5, y: 0.5}
+                        draw_text +: {
+                            text_style: REGULAR_TEXT {font_size: 13},
                             color: (COLOR_TEXT),
-                            wrap: Word
+                            flow: Flow.Right{wrap: true}
                         }
                     }
                 }
             }
         }
 
-        button_group_view = <View> {
+        button_group_view := View {
             width: Fill, height: Fit
             flow: Right
-            margin: {top: 20, right: 20}
-            align: {x: 1.0, y: 0.5},
+            margin: Inset{top: 20, right: 20}
+            align: Align{x: 1.0, y: 0.5},
 
-            button_group_rounded_view = <RoundedView> {
+            button_group_rounded_view := RoundedView {
                 width: Fit, height: Fit
                 spacing: 10
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_IMAGE_VIEWER_META_BACKGROUND),
+                draw_bg +: {
+                    color: instance((COLOR_IMAGE_VIEWER_META_BACKGROUND)),
                     border_radius: 4.0
                 }
-                padding: { left: 7, top: 4, bottom: 4, right: 7}
+                padding: Inset{ left: 7, top: 4, bottom: 4, right: 7}
 
-                zoom_out_button = <ImageViewerButton> {
-                    draw_icon: { svg_file: (ICON_ZOOM_OUT) }
-                    icon_walk: {width: 27, height: 27, margin: {left: 2}}
+                zoom_out_button := mod.widgets.ImageViewerButton {
+                    draw_icon +: { svg: (ICON_ZOOM_OUT) }
+                    icon_walk: Walk{width: 27, height: 27, margin: Inset{left: 2}}
                 }
 
-                zoom_in_button = <ImageViewerButton> {
-                    draw_icon: { svg_file: (ICON_ZOOM_IN) }
-                    icon_walk: {width: 27, height: 27, margin: {left: 2}}
+                zoom_in_button := mod.widgets.ImageViewerButton {
+                    draw_icon +: { svg: (ICON_ZOOM_IN) }
+                    icon_walk: Walk{width: 27, height: 27, margin: Inset{left: 2}}
                 }
 
-                rotate_ccw_button = <ImageViewerButton> {
-                    draw_icon: { svg_file: (ICON_ROTATE_CCW) }
+                rotate_ccw_button := mod.widgets.ImageViewerButton {
+                    draw_icon +: { svg: (ICON_ROTATE_CCW) }
                 }
 
-                rotate_cw_button = <ImageViewerButton> {
-                    draw_icon: { svg_file: (ICON_ROTATE_CW) }
+                rotate_cw_button := mod.widgets.ImageViewerButton {
+                    draw_icon +: { svg: (ICON_ROTATE_CW) }
                 }
 
-                reset_button = <ImageViewerButton> {
-                    draw_icon: { svg_file: (ICON_JUMP) }
-                    icon_walk: {width: 25, height: 25, margin: {bottom: 2}}
+                reset_button := mod.widgets.ImageViewerButton {
+                    draw_icon +: { svg: (ICON_JUMP) }
+                    icon_walk: Walk{width: 25, height: 25, margin: Inset{bottom: 2}}
                 }
 
-                close_button = <ImageViewerButton> {
-                    draw_icon: { svg_file: (ICON_CLOSE) }
-                    icon_walk: {width: 21, height: 21 }
+                close_button := mod.widgets.ImageViewerButton {
+                    draw_icon +: { svg: (ICON_CLOSE) }
+                    icon_walk: Walk{width: 21, height: 21 }
                 }
             }
         }
 
-        animator: {
-            mode = {
-                default: upright,
-                degree_neg90 = {
+        animator: Animator{
+            mode: {
+                default: @upright
+                degree_neg90: AnimatorState{
                     redraw: false,
-                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
-                    apply: {
-                        image_layer = {
-                            rotated_image_container = {
-                                rotated_image = {
-                                    draw_bg: {rotation: -1.5708}
-                                }
-                            }
-                        }
-                    }
+                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    apply: {}
                 }
-                upright = {
+                upright: AnimatorState{
                     redraw: false,
-                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
-                    apply: {
-                        image_layer = {
-                            rotated_image_container = {
-                                rotated_image = {
-                                    draw_bg: {rotation: 0.0}
-                                }
-                            }
-                        }
-                    }
+                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    apply: {}
                 }
-                degree_90 = {
+                degree_90: AnimatorState{
                     redraw: false,
-                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
-                    apply: {
-                        image_layer = {
-                            rotated_image_container = {
-                                rotated_image = {
-                                    draw_bg: {rotation: 1.5708}
-                                }
-                            }
-                        }
-                    }
+                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    apply: {}
                 }
-                degree_180 = {
+                degree_180: AnimatorState{
                     redraw: false,
-                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
-                    apply: {
-                        image_layer = {
-                            rotated_image_container = {
-                                rotated_image = {
-                                    draw_bg: {rotation: 3.14159}
-                                }
-                            }
-                        }
-                    }
+                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    apply: {}
                 }
-                degree_270 = {
+                degree_270: AnimatorState{
                     redraw: false,
-                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
-                    apply: {
-                        image_layer = {
-                            rotated_image_container = {
-                                rotated_image = {
-                                    draw_bg: {rotation: 4.71239}
-                                }
-                            }
-                        }
-                    }
+                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    apply: {}
                 }
-                degree_360 = {
+                degree_360: AnimatorState{
                     redraw: false,
                     from: {all: Forward {duration: 0.0}}
-                    apply: {
-                        image_layer = {
-                            rotated_image_container = {
-                                rotated_image = {
-                                    draw_bg: {rotation: 6.28318}
-                                }
-                            }
-                        }
-                    }
+                    apply: {}
                 }
             }
-            hover = {
-                default: off
-                off = {
+            hover: {
+                default: @off
+                off: AnimatorState{
                     apply: { }
                 }
-                on = {
+                on: AnimatorState{
                     apply: { }
                 }
             }
-            ui_animator = {
-                default: hide,
-                show = {
+            ui_animator: {
+                default: @hide
+                show: AnimatorState{
                     redraw: false,
-                    from: { all: Forward { duration: (UI_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (mod.widgets.UI_ANIMATION_DURATION_SECS) } }
                     apply: {
-                        button_group_view = {
-                            margin: { top: 20 }
+                        button_group_view: {
+                            margin: Inset{ top: 20 }
                         }
-                        metadata_view = {
-                            margin: { bottom: 20 }
+                        metadata_view: {
+                            margin: Inset{ bottom: 20 }
                         }
                     }
                 }
-                hide = {
+                hide: AnimatorState{
                     redraw: false,
-                    from: { all: Forward { duration: (UI_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (mod.widgets.UI_ANIMATION_DURATION_SECS) } }
                     apply: {
-                        button_group_view = {
-                            margin: { top: -200 }
+                        button_group_view: {
+                            margin: Inset{ top: -200 }
                         }
-                        metadata_view = {
-                            margin: { bottom: -300 }
+                        metadata_view: {
+                            margin: Inset{ bottom: -300 }
                         }
                     }
                 }
@@ -458,9 +412,10 @@ live_design! {
 
 /// Actions emitted by the `ImageViewer` widget.
 #[allow(clippy::large_enum_variant)]
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum ImageViewerAction {
     /// No action.
+    #[default]
     None,
     /// Display the ImageViewer widget based on the LoadState.
     Show(LoadState),
@@ -468,8 +423,9 @@ pub enum ImageViewerAction {
     Hide,
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget, Animator)]
 struct ImageViewer {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[rust] drag_state: DragState,
     /// The current rotation angle of the image. Max of 4, each step represents 90 degrees
@@ -528,11 +484,11 @@ impl Widget for ImageViewer {
 
             // Reapply zoom and pan if they differ from defaults
             if saved_zoom_level != 1.0 || saved_pan_offset.is_some() {
-                let rotated_image = self.view.rotated_image(ids!(rotated_image));
-                let width = self.capped_dimension.x * saved_zoom_level;
-                let height = self.capped_dimension.y * saved_zoom_level;
+                let rotated_image = self.view.image(cx, ids!(rotated_image));
+                let _width = self.capped_dimension.x * saved_zoom_level;
+                let _height = self.capped_dimension.y * saved_zoom_level;
 
-                if let Some(offset) = saved_pan_offset {
+                if let Some(_offset) = saved_pan_offset {
                     rotated_image.apply_over(
                         cx,
                         live! {
@@ -555,8 +511,8 @@ impl Widget for ImageViewer {
 
         // Handle hover events for UI elements without consuming the main image events
         // We'll track hover state in the FingerMove event within the image handling
-        let rotated_image = self.view.rotated_image(ids!(rotated_image));
-        let button_group_rounded_view = self.view.view(ids!(button_group_rounded_view));
+        let rotated_image = self.view.image(cx, ids!(rotated_image));
+        let button_group_rounded_view = self.view.view(cx, ids!(button_group_rounded_view));
         match event.hits(cx, button_group_rounded_view.area()) {
             Hit::FingerHoverIn(_) if !self.ui_visible_toggle => {
                 cx.stop_timer(self.hide_ui_timer);
@@ -573,7 +529,7 @@ impl Widget for ImageViewer {
             }
             _ => {}
         }
-        match event.hits(cx, self.view.view(ids!(metadata_rounded_view)).area()) {
+        match event.hits(cx, self.view.view(cx, ids!(metadata_rounded_view)).area()) {
             Hit::FingerHoverIn(_) if !self.ui_visible_toggle => {
                 cx.stop_timer(self.hide_ui_timer);
                 self.animator_cut(cx, ids!(ui_animator.show));
@@ -598,7 +554,7 @@ impl Widget for ImageViewer {
                 // Only reset pan_offset on double-tap, not single tap
                 if fe.tap_count == 2 {
                     self.drag_state.pan_offset = Some(DVec2::default());
-                    let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
+                    let rotated_image_container = self.view.image(cx, ids!(rotated_image));
                     rotated_image_container.apply_over(
                         cx,
                         live! {
@@ -623,8 +579,8 @@ impl Widget for ImageViewer {
                 if let Some(current_offset) = self.drag_state.pan_offset {
                     let drag_delta = fe.abs - self.drag_state.drag_start;
                     let new_offset = current_offset + drag_delta * self.config.pan_sensitivity;
-                    let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
-                    let size = rotated_image_container.area().rect(cx).size;
+                    let rotated_image_container = self.view.image(cx, ids!(rotated_image));
+                    let _size = rotated_image_container.area().rect(cx).size;
                     rotated_image_container.apply_over(
                         cx,
                         live! {
@@ -645,7 +601,7 @@ impl Widget for ImageViewer {
             }
             Hit::FingerHoverOver(_) => {
                 if !self.ui_visible_toggle
-                    && !self.animator.animator_in_state(cx, ids!(ui_animator.show))
+                    && !self.animator.in_state(cx, ids!(ui_animator.show))
                 {
                     self.animator_cut(cx, ids!(ui_animator.hide));
                     self.animator_play(cx, ids!(ui_animator.show));
@@ -691,7 +647,7 @@ impl Widget for ImageViewer {
             let mut remove_receiver = false;
             match receiver.try_recv() {
                 Ok(Ok(image_buffer)) => {
-                    let rotated_image = self.view.rotated_image(ids!(rotated_image));
+                    let rotated_image = self.view.image(cx, ids!(rotated_image));
                     let texture = image_buffer.into_new_texture(cx);
                     rotated_image.set_texture(cx, Some(texture));
                     remove_receiver = true;
@@ -730,8 +686,8 @@ impl Widget for ImageViewer {
                 3 => ids!(mode.degree_270), // 270°
                 _ => ids!(mode.upright),
             };
-            if self.animator.animator_in_state(cx, animation_id) {
-                self.is_animating_rotation = animator_action.is_animating();
+            if self.animator.in_state(cx, animation_id) {
+                self.is_animating_rotation = matches!(animator_action, AnimatorAction::Animating { .. });
             }
         }
 
@@ -759,16 +715,16 @@ impl Widget for ImageViewer {
 
 impl MatchEvent for ImageViewer {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        if self.view.button(ids!(close_button)).clicked(actions) {
+        if self.view.button(cx, ids!(close_button)).clicked(actions) {
             self.reset(cx);
             cx.action(ImageViewerAction::Hide);
         }
-        if self.view.button(ids!(reset_button)).clicked(actions) {
+        if self.view.button(cx, ids!(reset_button)).clicked(actions) {
             self.reset(cx);
         }
         if self
             .view
-            .button(ids!(zoom_out_button))
+            .button(cx, ids!(zoom_out_button))
             .clicked(actions)
         {
             self.adjust_zoom(cx, 1.0 / self.config.zoom_scale_factor);
@@ -776,7 +732,7 @@ impl MatchEvent for ImageViewer {
 
         if self
             .view
-            .button(ids!(zoom_in_button))
+            .button(cx, ids!(zoom_in_button))
             .clicked(actions)
         {
             self.adjust_zoom(cx, self.config.zoom_scale_factor);
@@ -784,7 +740,7 @@ impl MatchEvent for ImageViewer {
 
         if self
             .view
-            .button(ids!(rotate_cw_button))
+            .button(cx, ids!(rotate_cw_button))
             .clicked(actions)
         {
             if !self.is_animating_rotation {
@@ -799,7 +755,7 @@ impl MatchEvent for ImageViewer {
 
         if self
             .view
-            .button(ids!(rotate_ccw_button))
+            .button(cx, ids!(rotate_ccw_button))
             .clicked(actions)
         {
             if !self.is_animating_rotation {
@@ -858,10 +814,7 @@ impl ImageViewer {
         self.animator_cut(cx, ids!(mode.upright));
         let rotated_image_ref = self
             .view
-            .rotated_image(ids!(rotated_image_container.rotated_image));
-        rotated_image_ref.apply_over(cx, live! {
-            draw_bg: { scale: 1.0 }
-        });
+            .image(cx, ids!(rotated_image_container.rotated_image));
         rotated_image_ref.set_texture(cx, None);
     }
 
@@ -886,12 +839,11 @@ impl ImageViewer {
         self.drag_state = DragState::default();
 
         // Reset image position and scale
-        let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
+        let rotated_image_container = self.view.image(cx, ids!(rotated_image));
         rotated_image_container.apply_over(
             cx,
             live! {
-                margin: { top: 0.0, left: 0.0 },
-                draw_bg: { scale: 1.0 }
+                margin: { top: 0.0, left: 0.0 }
             },
         );
         rotated_image_container.redraw(cx);
@@ -928,7 +880,7 @@ impl ImageViewer {
             return;
         }
         let texture = self.texture.clone();
-        let rotated_image = self.rotated_image(ids!(rotated_image));
+        let rotated_image = self.image(cx, ids!(rotated_image));
         let (texture_width, texture_height) = texture
             .as_ref()
             .and_then(|texture| texture.get_format(cx).vec_width_height())
@@ -960,11 +912,11 @@ impl ImageViewer {
 
     /// Adjust the zoom level of the image viewer based on the provided zoom factor.
     fn adjust_zoom(&mut self, cx: &mut Cx, zoom_factor: f64) {
-        let rotated_image = self.view.rotated_image(ids!(rotated_image));
+        let rotated_image = self.view.image(cx, ids!(rotated_image));
         let size = rotated_image.area().rect(cx).size;
         let capped_dimension = self.capped_dimension;
         let target_zoom = self.drag_state.zoom_level * zoom_factor;
-        let (width, height) = if target_zoom < self.config.min_zoom {
+        let (_width, _height) = if target_zoom < self.config.min_zoom {
             (capped_dimension.x * self.config.min_zoom, capped_dimension.y * self.config.min_zoom)
         } else {
             let actual_zoom_factor = target_zoom / self.drag_state.zoom_level;
@@ -1017,15 +969,15 @@ impl ImageViewer {
     /// The loading spinner is shown, the error icon is hidden, and the
     /// status label is set to "Loading...".
     pub fn show_loading(&mut self, cx: &mut Cx) {
-        let footer = self.view.view(ids!(image_layer.footer));
+        let footer = self.view.view(cx, ids!(image_layer.footer));
         footer
-            .view(ids!(image_viewer_loading_spinner_view))
+            .view(cx, ids!(image_viewer_loading_spinner_view))
             .set_visible(cx, true);
         footer
-            .label(ids!(image_viewer_status_label))
+            .label(cx, ids!(image_viewer_status_label))
             .set_text(cx, "Loading...");
         footer
-            .view(ids!(image_viewer_forbidden_view))
+            .view(cx, ids!(image_viewer_forbidden_view))
             .set_visible(cx, false);
         footer.set_visible(cx, true);
         self.ui_visible_toggle = true;
@@ -1041,22 +993,22 @@ impl ImageViewer {
         if self.is_loaded {
             return;
         }
-        let footer = self.view.view(ids!(image_layer.footer));
+        let footer = self.view.view(cx, ids!(image_layer.footer));
         footer
-            .view(ids!(image_viewer_loading_spinner_view))
+            .view(cx, ids!(image_viewer_loading_spinner_view))
             .set_visible(cx, false);
         footer
-            .view(ids!(image_viewer_forbidden_view))
+            .view(cx, ids!(image_viewer_forbidden_view))
             .set_visible(cx, true);
         footer
-            .label(ids!(image_viewer_status_label))
+            .label(cx, ids!(image_viewer_status_label))
             .set_text(cx, &error.to_string());
         footer.set_visible(cx, true);
     }
 
     /// Hides the footer of the image viewer.
     pub fn hide_footer(&mut self, cx: &mut Cx) {
-        let footer = self.view.view(ids!(image_layer.footer));
+        let footer = self.view.view(cx, ids!(image_layer.footer));
         footer.set_visible(cx, false);
     }
 
@@ -1067,24 +1019,24 @@ impl ImageViewer {
     /// The image name is truncated to 24 characters and appended with "..." if it exceeds the limit.
     /// The human-readable size is calculated based on the image size in bytes.
     pub fn set_metadata(&mut self, cx: &mut Cx, metadata: &ImageViewerMetaData) {
-        let meta_view = self.view.view(ids!(metadata_view));
+        let meta_view = self.view.view(cx, ids!(metadata_view));
         let truncated_name = truncate_image_name(&metadata.image_name);
         let human_readable_size = format_file_size(metadata.image_file_size);
         let display_text = format!("{} ({})", truncated_name, human_readable_size);
         meta_view
-            .label(ids!(image_name_and_size))
+            .label(cx, ids!(image_name_and_size))
             .set_text(cx, &display_text);
         if let Some(timestamp) = metadata.timestamp {
             meta_view
-                .view(ids!(user_profile_view.content.timestamp_view))
+                .view(cx, ids!(user_profile_view.content.timestamp_view))
                 .set_visible(cx, true);
             meta_view
-                .timestamp(ids!(user_profile_view.content.timestamp_view.timestamp))
+                .timestamp(cx, ids!(user_profile_view.content.timestamp_view.timestamp))
                 .set_date_time(cx, timestamp);
         }
 
         if let Some((timeline_kind, event_timeline_item)) = &metadata.avatar_parameter {
-            let (sender, _) = self.view.avatar(ids!(user_profile_view.avatar)).set_avatar_and_get_username(
+            let (sender, _) = self.view.avatar(cx, ids!(user_profile_view.avatar)).set_avatar_and_get_username(
                 cx,
                 timeline_kind,
                 event_timeline_item.sender(),
@@ -1094,11 +1046,11 @@ impl ImageViewer {
             );
             if sender.len() > MAX_USERNAME_LENGTH {
                 meta_view
-                    .label(ids!(user_profile_view.content.username))
+                    .label(cx, ids!(user_profile_view.content.username))
                     .set_text(cx, &format!("{}...", &sender[..MAX_USERNAME_LENGTH - 3]));
             } else {
                 meta_view
-                    .label(ids!(user_profile_view.content.username))
+                    .label(cx, ids!(user_profile_view.content.username))
                     .set_text(cx, &sender);
             };
         }
diff --git a/src/shared/jump_to_bottom_button.rs b/src/shared/jump_to_bottom_button.rs
index 2d368cd15..08040aaec 100644
--- a/src/shared/jump_to_bottom_button.rs
+++ b/src/shared/jump_to_bottom_button.rs
@@ -1,40 +1,38 @@
 use makepad_widgets::*;
-use crate::shared::callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition};
 
 const SCROLL_TO_BOTTOM_SPEED: f64 = 90.0;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+
+    mod.widgets.ICO_JUMP_TO_BOTTOM = crate_resource("self://resources/icon_jump_to_bottom.svg")
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::*;
 
-    ICO_JUMP_TO_BOTTOM = dep("crate://self/resources/icon_jump_to_bottom.svg")
 
     // A jump to bottom button that appears when the timeline is not at the bottom.
-    pub JumpToBottomButton = {{JumpToBottomButton}} {
+    mod.widgets.JumpToBottomButton = #(JumpToBottomButton::register_widget(vm)) {
         width: Fill,
         height: Fill,
         flow: Overlay,
-        align: {x: 1.0, y: 1.0},
+        align: Align{x: 1.0, y: 1.0},
         visible: false,
-        <View> {
+        View {
             width: 65, height: 75,
-            align: {x: 0.5, y: 1.0},
+            align: Align{x: 0.5, y: 1.0},
             flow: Overlay,
-            jump_to_bottom_button = <IconButton> {
+            jump_to_bottom_button := IconButton {
                 spacing: 0,
                 width: 50, height: 50,
-                margin: {bottom: 8},
-                draw_icon: {svg_file: (ICO_JUMP_TO_BOTTOM)},
-                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
+                margin: Inset{bottom: 8},
+                draw_icon +: {svg: (mod.widgets.ICO_JUMP_TO_BOTTOM)},
+                icon_walk: Walk{width: 20, height: 20, margin: Inset{top: 10, right: 4.5} }
                 // draw a circular background for the button
-                draw_bg: {
-                    instance background_color: #edededce,
-                    fn pixel(self) -> vec4 {
-                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                draw_bg +: {
+                    background_color: instance(#edededce),
+                    pixel: fn() {
+                        let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                         let c = self.rect_size * 0.5;
                         sdf.circle(c.x, c.x, c.x);
                         sdf.fill_keep(self.background_color);
@@ -44,26 +42,28 @@ live_design! {
                 enable_long_press: true,
             }
 
+            // TODO: replace the below with the UnreadBadge widget
+
             // A badge overlay on the jump to bottom button showing unread messages
-            unread_message_badge = <View> {
+            unread_message_badge := View {
                 width: 25, height: 20,
-                align: {
+                align: Align{
                     x: 0.5,
                     y: 0.5
                 }
                 visible: false,
                 flow: Overlay,
-                green_rounded_label = <View> {
+                green_rounded_label := SolidView {
                     width: Fill,
                     height: Fill,
                     show_bg: true,
-                    draw_bg: {
-                        color: (COLOR_UNREAD_BADGE_MESSAGES)
-                        instance border_radius: 4.0
+                    draw_bg +: {
+                        color: uniform((COLOR_UNREAD_BADGE_MESSAGES))
+                        border_radius: instance(4.0)
                         // Adjust this border_size to larger value to make oval smaller 
-                        instance border_size: 2.0
-                        fn pixel(self) -> vec4 {
-                            let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                        border_size: instance(2.0)
+                        pixel: fn() {
+                            let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                             sdf.box(
                                 self.border_size,
                                 self.border_size,
@@ -77,14 +77,14 @@ live_design! {
                     }
                 }
                 // Label that displays the unread message count
-                unread_messages_count = <Label> {
+                unread_messages_count := Label {
                     width: Fit,
                     height: Fit,
                     flow: Right, // do not wrap
                     text: "",
-                    draw_text: {
+                    draw_text +: {
                         color: #ffffff,
-                        text_style: {font_size: 8.0},
+                        text_style: theme.font_regular {font_size: 8.0},
                     }
                 }
             }
@@ -94,19 +94,19 @@ live_design! {
 }
 
 
-#[derive(LiveHook, Live, Widget)]
+#[derive(ScriptHook, Script, Widget)]
 pub struct JumpToBottomButton {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 }
 
 impl Widget for JumpToBottomButton {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        let button_area = self.button(ids!(jump_to_bottom_button)).area();
+        let button_area = self.button(cx, ids!(jump_to_bottom_button)).area();
         match event.hits(cx, button_area) {
             Hit::FingerHoverIn(_) | Hit::FingerLongPress(_) => {
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     TooltipAction::HoverIn {
                         text: "Jump to bottom".to_string(),
                         widget_rect: button_area.rect(cx),
@@ -119,8 +119,7 @@ impl Widget for JumpToBottomButton {
             }
             Hit::FingerHoverOut(_) => {
                 cx.widget_action(
-                    self.widget_uid(),
-                    &scope.path,
+                    self.widget_uid(), 
                     TooltipAction::HoverOut,
                 );
             }
@@ -147,7 +146,7 @@ impl JumpToBottomButton {
     pub fn update_visibility(&mut self, cx: &mut Cx, is_at_bottom: bool) {
         if is_at_bottom {
             self.visible = false;
-            self.view(ids!(unread_message_badge)).set_visible(cx, false);
+            self.view(cx, ids!(unread_message_badge)).set_visible(cx, false);
         } else {
             self.visible = true;
         }
@@ -161,17 +160,17 @@ impl JumpToBottomButton {
         match count {
             UnreadMessageCount::Unknown => {
                 self.visible = true;
-                self.view(ids!(unread_message_badge)).set_visible(cx, true);
-                self.label(ids!(unread_messages_count)).set_text(cx, "");
+                self.view(cx, ids!(unread_message_badge)).set_visible(cx, true);
+                self.label(cx, ids!(unread_messages_count)).set_text(cx, "");
             }
             UnreadMessageCount::Known(0) => {
                 self.visible = false;
-                self.view(ids!(unread_message_badge)).set_visible(cx, false);
-                self.label(ids!(unread_messages_count)).set_text(cx, "");
+                self.view(cx, ids!(unread_message_badge)).set_visible(cx, false);
+                self.label(cx, ids!(unread_messages_count)).set_text(cx, "");
             }
             UnreadMessageCount::Known(unread_message_count) => {
                 self.visible = true;
-                self.view(ids!(unread_message_badge)).set_visible(cx, true);
+                self.view(cx, ids!(unread_message_badge)).set_visible(cx, true);
                 let (border_size, plus_sign) = if unread_message_count > 99 {
                     (0.0, "+")
                 } else if unread_message_count > 9 {
@@ -179,18 +178,16 @@ impl JumpToBottomButton {
                 } else {
                     (2.0, "")
                 };
-                self.label(ids!(unread_messages_count)).set_text(
+                self.label(cx, ids!(unread_messages_count)).set_text(
                     cx,
                     &format!("{}{plus_sign}", std::cmp::min(unread_message_count, 99))
                 );
-                self.view(ids!(unread_message_badge.green_rounded_label)).apply_over(cx, live!{
-                    draw_bg: {
-                        border_size: (border_size),
-                    }
+                let mut badge_view = self.view(cx, ids!(unread_message_badge.green_rounded_label));
+                script_apply_eval!(cx, badge_view, {
+                    draw_bg.border_size: #(border_size),
                 });
             }
         }
-        
     }
 
     /// Updates the visibility of the jump to bottom button and the unread message badge
@@ -211,7 +208,7 @@ impl JumpToBottomButton {
         //       to check if the portallist has been scrolled than to just directly
         //       query the portallist's `at_end` state and set the visibility accordingly.
 
-        if self.button(ids!(jump_to_bottom_button)).clicked(actions) {
+        if self.button(cx, ids!(jump_to_bottom_button)).clicked(actions) {
             portal_list.smooth_scroll_to_end(
                 cx,
                 SCROLL_TO_BOTTOM_SPEED,
diff --git a/src/shared/mentionable_text_input.rs b/src/shared/mentionable_text_input.rs
index ee5813917..cff602a4b 100644
--- a/src/shared/mentionable_text_input.rs
+++ b/src/shared/mentionable_text_input.rs
@@ -2,6 +2,7 @@
 //! Can be used in any context where user mentions are needed (message input, editing)
 //!
 use crate::avatar_cache::*;
+use crate::shared::command_text_input::CommandTextInput;
 use crate::shared::avatar::AvatarWidgetRefExt;
 use crate::shared::bouncing_dots::BouncingDotsWidgetRefExt;
 use crate::shared::styles::COLOR_UNKNOWN_ROOM_AVATAR;
@@ -9,6 +10,7 @@ use crate::utils;
 
 
 use makepad_widgets::{text::selection::Cursor, *};
+use crate::{LivePtr, widget_ref_from_live_ptr};
 use matrix_sdk::ruma::{events::{room::message::RoomMessageEventContent, Mentions}, OwnedRoomId, OwnedUserId};
 use matrix_sdk::room::RoomMember;
 use std::collections::{BTreeMap, BTreeSet};
@@ -18,36 +20,31 @@ use crate::home::room_screen::RoomScreenProps;
 // Constants for mention popup height calculations
 const DESKTOP_ITEM_HEIGHT: f64 = 32.0;
 const MOBILE_ITEM_HEIGHT: f64 = 64.0;
-const MOBILE_USERNAME_SPACING: f64 = 0.5;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::Avatar;
-    use crate::shared::helpers::FillerX;
-    use crate::shared::bouncing_dots::BouncingDots;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    pub FOCUS_HOVER_COLOR = #C
-    pub KEYBOARD_FOCUS_OR_COLOR_HOVER = #1C274C
+    mod.widgets.FOCUS_HOVER_COLOR = #C
+
+    mod.widgets.KEYBOARD_FOCUS_OR_COLOR_HOVER = #1C274C
 
     // Template for user list items in the mention dropdown
-    UserListItem = <View> {
+    mod.widgets.UserListItem = SolidView {
         width: Fill,
         height: Fit,
-        margin: {left: 4, right: 4}
-        padding: {left: 8, right: 8, top: 4, bottom: 4}
+        margin: Inset{left: 4, right: 4}
+        padding: Inset{left: 8, right: 8, top: 4, bottom: 4}
         show_bg: true
-        cursor: Hand
-        draw_bg: {
-            color: (COLOR_PRIMARY),
-            uniform border_radius: 4.0,
-            instance hover: 0.0,
-            instance selected: 0.0,
-
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+        cursor: MouseCursor.Hand
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY)),
+            border_radius: uniform(4.0),
+            hover: instance(0.0),
+            selected: instance(0.0),
+
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 // Draw rounded rectangle with configurable radius
                 sdf.box(0., 0., self.rect_size.x, self.rect_size.y, self.border_radius);
 
@@ -65,57 +62,61 @@ live_design! {
         flow: Down
         spacing: 2.0
 
-        user_info = <View> {
+        user_info := View {
             width: Fill,
             height: Fit,
             flow: Right,
             spacing: 8.0
-            align: {y: 0.5}
+            align: Align{y: 0.5}
 
-            avatar = <Avatar> {
+            avatar := Avatar {
                 width: 24,
                 height: 24,
-                text_view = { text = { draw_text: {
-                    text_style: { font_size: 12.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: theme.font_regular { font_size: 12.0 }
+                        }
+                    }
+                }
             }
 
-            username = <Label> {
+            username := Label {
                 height: Fit,
-                draw_text: {
+                draw_text +: {
                     color: #000,
-                    text_style: {font_size: 14.0}
+                    text_style: theme.font_regular {font_size: 14.0}
                 }
             }
 
-            filler = <FillerX> {}
+            filler := FillerX {}
         }
 
-        user_id = <Label> {
+        user_id := Label {
             height: Fit,
-            draw_text: {
+            draw_text +: {
                 color: #666,
-                text_style: {font_size: 12.0}
+                text_style: theme.font_regular {font_size: 12.0}
             }
         }
     }
 
     // Template for the @room mention list item
-    RoomMentionListItem = <View> {
+    mod.widgets.RoomMentionListItem = RoundedView {
         width: Fill,
         height: Fit,
-        margin: {left: 4, right: 4}
-        padding: {left: 8, right: 8, top: 4, bottom: 4}
+        margin: Inset{left: 4, right: 4}
+        padding: Inset{left: 8, right: 8, top: 4, bottom: 4}
         show_bg: true
-        cursor: Hand
-        draw_bg: {
-            color: (COLOR_PRIMARY),
-            uniform border_radius: 4.0,
-            instance hover: 0.0,
-            instance selected: 0.0,
-
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+        cursor: MouseCursor.Hand
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY)),
+            border_radius: uniform(4.0),
+            hover: instance(0.0),
+            selected: instance(0.0),
+
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 sdf.box(0., 0., self.rect_size.x, self.rect_size.y, self.border_radius);
 
                 if self.selected > 0.0 {
@@ -130,131 +131,136 @@ live_design! {
         }
         flow: Down
         spacing: 2.0
-        align: {y: 0.5}
+        align: Align{y: 0.5}
 
-        user_info = <View> {
+        user_info := View {
             width: Fill,
             height: Fit,
             flow: Right,
             spacing: 8.0
-            align: {y: 0.5}
+            align: Align{y: 0.5}
 
-            room_avatar = <Avatar> {
+            room_avatar := Avatar {
                 width: 24,
                 height: 24,
-                text_view = { text = { draw_text: {
-                    text_style: { font_size: 12.0 }
-                }}}
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: theme.font_regular { font_size: 12.0 }
+                        }
+                    }
+                }
             }
 
-            room_mention = <Label> {
+            room_mention := Label {
                 height: Fit,
-                draw_text: {
+                draw_text +: {
                     color: #000,
-                    text_style: {font_size: 14.0}
+                    text_style: theme.font_regular {font_size: 14.0}
                 }
                 text: "Notify the entire room"
             }
 
-            filler = <FillerX> {}
+            filler := FillerX {}
         }
 
-        room_user_id = <Label> {
+        room_user_id := Label {
             height: Fit,
-            align: {y: 0.5},
-            draw_text: {
+            align: Align{y: 0.5},
+            draw_text +: {
                 color: #666,
-                text_style: {font_size: 12.0}
+                text_style: theme.font_regular {font_size: 12.0}
             }
             text: "@room"
         }
     }
 
     // Template for loading indicator when members are being fetched
-    LoadingIndicator = <View> {
+    mod.widgets.LoadingIndicator = SolidView {
         width: Fill,
         height: 48,
-        margin: {left: 4, right: 4}
-        padding: {left: 8, right: 8, top: 8, bottom: 8},
+        margin: Inset{left: 4, right: 4}
+        padding: Inset{left: 8, right: 8, top: 8, bottom: 8},
         flow: Right,
         spacing: 8.0,
-        align: {x: 0.0, y: 0.5}
-        draw_bg: {
-            color: (COLOR_PRIMARY),
+        align: Align{x: 0.0, y: 0.5}
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY)),
         }
 
-        loading_text = <Label> {
+        loading_text := Label {
             height: Fit,
-            draw_text: {
+            draw_text +: {
                 color: #666,
-                text_style: {font_size: 14.0}
+                text_style: theme.font_regular {font_size: 14.0}
             }
             text: "Loading members"
         }
 
-        loading_animation = <BouncingDots> {
+        loading_animation := BouncingDots {
             width: 60,
             height: 24,
-            draw_bg: {
-                color: (COLOR_ROBRIX_PURPLE),
+            draw_bg +: {
+                color: instance((COLOR_ROBRIX_PURPLE)),
                 dot_radius: 2.0,
             }
         }
     }
 
     // Template for no matches indicator when no users match the search
-    NoMatchesIndicator = <View> {
+    mod.widgets.NoMatchesIndicator = SolidView {
         width: Fill,
         height: 48,
-        margin: {left: 4, right: 4}
-        padding: {left: 8, right: 8, top: 8, bottom: 8},
+        margin: Inset{left: 4, right: 4}
+        padding: Inset{left: 8, right: 8, top: 8, bottom: 8},
         flow: Right,
         spacing: 8.0,
-        align: {x: 0.0, y: 0.5}
-        draw_bg: {
-            color: (COLOR_PRIMARY),
+        align: Align{x: 0.0, y: 0.5}
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY)),
         }
 
-        no_matches_text = <Label> {
+        no_matches_text := Label {
             height: Fit,
-            draw_text: {
+            draw_text +: {
                 color: #666,
-                text_style: {font_size: 14.0}
+                text_style: theme.font_regular {font_size: 14.0}
             }
             text: "No matching users found"
         }
     }
 
-    pub MentionableTextInput = {{MentionableTextInput}}<CommandTextInput> {
+    mod.widgets.MentionableTextInput = #(MentionableTextInput::register_widget(vm)) {
+
         width: Fill,
         height: Fit
         trigger: "@"
         inline_search: true
 
-        color_focus: (FOCUS_HOVER_COLOR),
-        color_hover: (FOCUS_HOVER_COLOR),
+        color_focus: (mod.widgets.FOCUS_HOVER_COLOR),
+        color_hover: (mod.widgets.FOCUS_HOVER_COLOR),
 
-        popup = {
+        popup := RoundedView {
             spacing: 0.0
             padding: 0.0
 
-            draw_bg: {
-                color: (COLOR_SECONDARY),
+            draw_bg +: {
+                color: instance((COLOR_SECONDARY)),
             }
-            header_view = {
-                margin: {left: 4, right: 4}
-                draw_bg: {
-                    color: (COLOR_ROBRIX_PURPLE),
+            header_view := SolidView {
+                margin: Inset{left: 4, right: 4}
+                draw_bg +: {
+                    color: instance((COLOR_ROBRIX_PURPLE)),
                 }
-                header_label = {
-                    draw_text: {
+                header_label := Label {
+                    draw_text +: {
                         color: (COLOR_PRIMARY_DARKER),
                     }
                     text: "Users in this Room"
                 }
             }
 
-            list = {
+            list := mod.widgets.CommandTextInputList {
                 height: Fit
                 clip_y: true
                 spacing: 0.0
@@ -262,21 +268,21 @@ live_design! {
             }
         }
 
-        persistent = {
-            top = { height: 0 }
-            bottom = { height: 0 }
-            center = {
-                text_input = <RobrixTextInput> {
+        persistent := RoundedView {
+            top := View { height: 0 }
+            bottom := View { height: 0 }
+            center := RoundedView {
+                text_input := RobrixTextInput {
                     empty_text: "Start typing..."
                 }
             }
         }
 
         // Template for user list items in the mention popup
-        user_list_item: <UserListItem> {}
-        room_mention_list_item: <RoomMentionListItem> {}
-        loading_indicator: <LoadingIndicator> {}
-        no_matches_indicator: <NoMatchesIndicator> {}
+        user_list_item: mod.widgets.UserListItem {}
+        room_mention_list_item: mod.widgets.RoomMentionListItem {}
+        loading_indicator: mod.widgets.LoadingIndicator {}
+        no_matches_indicator: mod.widgets.NoMatchesIndicator {}
     }
 }
 
@@ -297,8 +303,9 @@ pub enum MentionableTextInputAction {
 }
 
 /// Widget that extends CommandTextInput with @mention capabilities
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct MentionableTextInput {
+    #[source] source: ScriptObjectRef,
     /// Base command text input
     #[deref] cmd_text_input: CommandTextInput,
     /// Template for user list items
@@ -342,7 +349,7 @@ impl Widget for MentionableTextInput {
             .clone();
 
         if let Event::Actions(actions) = event {
-            let text_input_ref = self.cmd_text_input.text_input_ref();
+            let text_input_ref = self.cmd_text_input.text_input_ref(cx);
             let text_input_uid = text_input_ref.widget_uid();
             let text_input_area = text_input_ref.area();
             let has_focus = cx.has_key_focus(text_input_area);
@@ -355,9 +362,9 @@ impl Widget for MentionableTextInput {
             // Handle build items request
             if self.cmd_text_input.should_build_items(actions) {
                 if has_focus {
-                    let search_text = self.cmd_text_input.search_text().to_lowercase();
+                    let search_text = self.cmd_text_input.search_text(cx).to_lowercase();
                     self.update_user_list(cx, &search_text, scope);
-                } else if self.cmd_text_input.view(ids!(popup)).visible() {
+                } else if self.cmd_text_input.view(cx, ids!(popup)).visible() {
                     self.close_mention_popup(cx);
                 }
             }
@@ -385,7 +392,7 @@ impl Widget for MentionableTextInput {
                     if self.can_notify_room != *can_notify_room {
                         self.can_notify_room = *can_notify_room;
                         if self.is_searching && has_focus {
-                            let search_text = self.cmd_text_input.search_text().to_lowercase();
+                            let search_text = self.cmd_text_input.search_text(cx).to_lowercase();
                             self.update_user_list(cx, &search_text, scope);
                         } else {
                             self.redraw(cx);
@@ -395,7 +402,7 @@ impl Widget for MentionableTextInput {
             }
 
             // Close popup if focus is lost
-            if !has_focus && self.cmd_text_input.view(ids!(popup)).visible() {
+            if !has_focus && self.cmd_text_input.view(cx, ids!(popup)).visible() {
                 self.close_mention_popup(cx);
             }
         }
@@ -411,12 +418,12 @@ impl Widget for MentionableTextInput {
                 if !room_members.is_empty() {
                     // Members are now available, update the list
                     self.members_loading = false;
-                    let text_input = self.cmd_text_input.text_input(ids!(text_input));
+                    let text_input = self.cmd_text_input.text_input(cx, ids!(text_input));
                     let text_input_area = text_input.area();
                     let is_focused = cx.has_key_focus(text_input_area);
 
                     if is_focused {
-                        let search_text = self.cmd_text_input.search_text().to_lowercase();
+                        let search_text = self.cmd_text_input.search_text(cx).to_lowercase();
                         self.update_user_list(cx, &search_text, scope);
                     }
                 }
@@ -456,9 +463,6 @@ impl MentionableTextInput {
         } else if !members_are_empty && self.members_loading {
             // Members have been loaded, stop loading state
             self.members_loading = false;
-            // Reset popup height to ensure proper calculation for user list
-            let popup = self.cmd_text_input.view(ids!(popup));
-            popup.apply_over(cx, live! { height: Fit });
         } else if members_are_empty && self.members_loading {
             // Still loading and members are empty - keep showing loading indicator
             return true;
@@ -482,10 +486,10 @@ impl MentionableTextInput {
         }
 
         let Some(ptr) = self.room_mention_list_item else { return false };
-        let room_mention_item = WidgetRef::new_from_ptr(cx, Some(ptr));
+        let room_mention_item = widget_ref_from_live_ptr(cx, Some(ptr));
         let mut room_avatar_shown = false;
 
-        let avatar_ref = room_mention_item.avatar(ids!(user_info.room_avatar));
+        let avatar_ref = room_mention_item.avatar(cx, ids!(user_info.room_avatar));
 
         // Get room avatar fallback text from room name (with automatic ID fallback)
         let room_label = room_props.room_name_id.to_string();
@@ -526,19 +530,20 @@ impl MentionableTextInput {
 
         // Apply layout and height styling based on device type
         let new_height = if is_desktop { DESKTOP_ITEM_HEIGHT } else { MOBILE_ITEM_HEIGHT };
+        let mut room_mention_item = room_mention_item;
         if is_desktop {
-            room_mention_item.apply_over(cx, live! {
-                height: (new_height),
-                flow: Right,
+            script_apply_eval!(cx, room_mention_item, {
+                height: #(new_height),
+                flow: Flow.Right,
             });
         } else {
-            room_mention_item.apply_over(cx, live! {
-                height: (new_height),
-                flow: Down,
+            script_apply_eval!(cx, room_mention_item, {
+                height: #(new_height),
+                flow: Flow.Down,
             });
         }
 
-        self.cmd_text_input.add_item(room_mention_item);
+        self.cmd_text_input.add_item(cx, room_mention_item);
         true
     }
 
@@ -601,37 +606,33 @@ impl MentionableTextInput {
 
         for (index, (display_name, member)) in matched_members.into_iter().take(user_items_limit).enumerate() {
             let Some(user_list_item_ptr) = self.user_list_item else { continue };
-            let item = WidgetRef::new_from_ptr(cx, Some(user_list_item_ptr));
+            let item = widget_ref_from_live_ptr(cx, Some(user_list_item_ptr));
 
-            item.label(ids!(user_info.username)).set_text(cx, &display_name);
+            item.label(cx, ids!(user_info.username)).set_text(cx, &display_name);
 
             // Use the full user ID string
             let user_id_str = member.user_id().as_str();
-            item.label(ids!(user_id)).set_text(cx, user_id_str);
+            item.label(cx, ids!(user_id)).set_text(cx, user_id_str);
 
             if is_desktop {
-                item.apply_over(
-                    cx,
-                    live!(
-                        flow: Right,
-                        height: (DESKTOP_ITEM_HEIGHT),
-                        align: {y: 0.5}
-                    ),
-                );
-                item.view(ids!(user_info.filler)).set_visible(cx, true);
+                let mut item_ref = item.clone();
+                script_apply_eval!(cx, item_ref, {
+                    flow: Flow.Right,
+                    height: #(DESKTOP_ITEM_HEIGHT),
+                    align: Align{y: 0.5}
+                });
+                item.view(cx, ids!(user_info.filler)).set_visible(cx, true);
             } else {
-                item.apply_over(
-                    cx,
-                    live!(
-                        flow: Down,
-                        height: (MOBILE_ITEM_HEIGHT),
-                        spacing: (MOBILE_USERNAME_SPACING)
-                    ),
-                );
-                item.view(ids!(user_info.filler)).set_visible(cx, false);
+                let mut item_ref = item.clone();
+                script_apply_eval!(cx, item_ref, {
+                    flow: Flow.Down,
+                    height: #(MOBILE_ITEM_HEIGHT),
+                    spacing: 2.0
+                });
+                item.view(cx, ids!(user_info.filler)).set_visible(cx, false);
             }
 
-            let avatar = item.avatar(ids!(user_info.avatar));
+            let avatar = item.avatar(cx, ids!(user_info.avatar));
             if let Some(mxc_uri) = member.avatar_url() {
                 match get_or_fetch_avatar(cx, &mxc_uri.to_owned()) {
                     AvatarCacheEntry::Loaded(avatar_data) => {
@@ -647,7 +648,7 @@ impl MentionableTextInput {
                 avatar.show_text(cx, None, None, &display_name);
             }
 
-            self.cmd_text_input.add_item(item.clone());
+            self.cmd_text_input.add_item(cx, item.clone());
             items_added += 1;
 
             // Set keyboard focus to the first item
@@ -662,22 +663,21 @@ impl MentionableTextInput {
 
     /// Update popup visibility and layout
     fn update_popup_visibility(&mut self, cx: &mut Cx, has_items: bool) {
-        let popup = self.cmd_text_input.view(ids!(popup));
+        let popup = self.cmd_text_input.view(cx, ids!(popup));
 
         if has_items {
             popup.set_visible(cx, true);
             if self.is_searching {
-                self.cmd_text_input.text_input_ref().set_key_focus(cx);
+                self.cmd_text_input.text_input_ref(cx).set_key_focus(cx);
             }
         } else if self.is_searching {
             // If we're searching but have no items, show "no matches" message
             // Keep the popup open so users can correct their search
             self.show_no_matches_indicator(cx);
             popup.set_visible(cx, true);
-            self.cmd_text_input.text_input_ref().set_key_focus(cx);
+            self.cmd_text_input.text_input_ref(cx).set_key_focus(cx);
         } else {
             // Only hide popup if we're not actively searching
-            popup.apply_over(cx, live! { height: Fit });
             popup.set_visible(cx, false);
         }
     }
@@ -688,16 +688,16 @@ impl MentionableTextInput {
         // This is good practice to maintain signature consistency with other methods
         // and allow for future scope-based enhancements
 
-        let text_input_ref = self.cmd_text_input.text_input_ref();
+        let text_input_ref = self.cmd_text_input.text_input_ref(cx);
         let current_text = text_input_ref.text();
         let head = text_input_ref.borrow().map_or(0, |p| p.cursor().index);
 
         if let Some(start_idx) = self.current_mention_start_index {
-            let room_mention_label = selected.label(ids!(user_info.room_mention));
+            let room_mention_label = selected.label(cx, ids!(user_info.room_mention));
             let room_mention_text = room_mention_label.text();
-            let room_user_id_text = selected.label(ids!(room_user_id)).text();
+            let room_user_id_text = selected.label(cx, ids!(room_user_id)).text();
 
-            let is_room_mention = { room_mention_text == "Notify the entire room" && room_user_id_text == "@room" };
+            let is_room_mention = room_mention_text == "Notify the entire room" && room_user_id_text == "@room";
 
             let mention_to_insert = if is_room_mention {
                 // Always set to true, don't reset previously selected @room mentions
@@ -705,8 +705,8 @@ impl MentionableTextInput {
                 "@room ".to_string()
             } else {
                 // User selected a specific user
-                let username = selected.label(ids!(user_info.username)).text();
-                let user_id_str = selected.label(ids!(user_id)).text();
+                let username = selected.label(cx, ids!(user_info.username)).text();
+                let user_id_str = selected.label(cx, ids!(user_id)).text();
                 let Ok(user_id): Result<OwnedUserId, _> = user_id_str.clone().try_into() else {
                     log!("Failed to parse user_id: {}", user_id_str);
                     return;
@@ -756,7 +756,7 @@ impl MentionableTextInput {
             return;
         }
 
-        let cursor_pos = self.cmd_text_input.text_input_ref().borrow().map_or(0, |p| p.cursor().index);
+        let cursor_pos = self.cmd_text_input.text_input_ref(cx).borrow().map_or(0, |p| p.cursor().index);
 
         // Check if we're currently searching and the @ symbol was deleted
         if self.is_searching {
@@ -782,8 +782,8 @@ impl MentionableTextInput {
             ).to_lowercase();
 
             // Ensure header view is visible to prevent header disappearing during consecutive @mentions
-            let popup = self.cmd_text_input.view(ids!(popup));
-            let header_view = self.cmd_text_input.view(ids!(popup.header_view));
+            let popup = self.cmd_text_input.view(cx, ids!(popup));
+            let header_view = self.cmd_text_input.view(cx, ids!(popup.header_view));
             header_view.set_visible(cx, true);
 
             self.update_user_list(cx, &search_text, scope);
@@ -808,14 +808,14 @@ impl MentionableTextInput {
         let room_members = room_props.room_members.as_ref().unwrap();
 
         // Clear old list items, prepare to populate new list
-        self.cmd_text_input.clear_items();
+        self.cmd_text_input.clear_items(cx);
 
         if !self.is_searching {
             return;
         }
 
         let is_desktop = cx.display_context.is_desktop();
-        let max_visible_items = if is_desktop { 10 } else { 5 };
+        let max_visible_items: usize = if is_desktop { 10 } else { 5 };
         let mut items_added = 0;
 
         // 4. Try to add @room mention item
@@ -1000,60 +1000,58 @@ impl MentionableTextInput {
     /// Shows the loading indicator when members are being fetched
     fn show_loading_indicator(&mut self, cx: &mut Cx) {
         // Clear any existing items
-        self.cmd_text_input.clear_items();
+        self.cmd_text_input.clear_items(cx);
 
         // Create loading indicator widget
         let Some(ptr) = self.loading_indicator else { return };
-        let loading_item = WidgetRef::new_from_ptr(cx, Some(ptr));
+        let loading_item = widget_ref_from_live_ptr(cx, Some(ptr));
 
         // Start the loading animation
-        loading_item.bouncing_dots(ids!(loading_animation)).start_animation(cx);
+        loading_item.bouncing_dots(cx, ids!(loading_animation)).start_animation(cx);
 
         // Add the loading indicator to the popup
-        self.cmd_text_input.add_item(loading_item);
+        self.cmd_text_input.add_item(cx, loading_item);
 
         // Setup popup dimensions for loading state
-        let popup = self.cmd_text_input.view(ids!(popup));
-        let header_view = self.cmd_text_input.view(ids!(popup.header_view));
+        let popup = self.cmd_text_input.view(cx, ids!(popup));
+        let header_view = self.cmd_text_input.view(cx, ids!(popup.header_view));
 
         // Ensure header is visible
         header_view.set_visible(cx, true);
 
         // Don't manually set popup height for loading - let it auto-size based on content
-        // This avoids conflicts with list = { height: Fill }
+        // This avoids conflicts with list: { height: Fill }
         popup.set_visible(cx, true);
 
         // Maintain text input focus
         if self.is_searching {
-            self.cmd_text_input.text_input_ref().set_key_focus(cx);
+            self.cmd_text_input.text_input_ref(cx).set_key_focus(cx);
         }
     }
 
     /// Shows the no matches indicator when no users match the search
     fn show_no_matches_indicator(&mut self, cx: &mut Cx) {
         // Clear any existing items
-        self.cmd_text_input.clear_items();
+        self.cmd_text_input.clear_items(cx);
 
         // Create no matches indicator widget
         let Some(ptr) = self.no_matches_indicator else { return };
-        let no_matches_item = WidgetRef::new_from_ptr(cx, Some(ptr));
+        let no_matches_item = widget_ref_from_live_ptr(cx, Some(ptr));
 
         // Add the no matches indicator to the popup
-        self.cmd_text_input.add_item(no_matches_item);
+        self.cmd_text_input.add_item(cx, no_matches_item);
 
         // Setup popup dimensions for no matches state
-        let popup = self.cmd_text_input.view(ids!(popup));
-        let header_view = self.cmd_text_input.view(ids!(popup.header_view));
+        let popup = self.cmd_text_input.view(cx, ids!(popup));
+        let header_view = self.cmd_text_input.view(cx, ids!(popup.header_view));
 
         // Ensure header is visible
         header_view.set_visible(cx, true);
-
-        // Let popup auto-size based on content
-        popup.apply_over(cx, live! { height: Fit });
+        let _ = popup;
 
         // Maintain text input focus so user can continue typing
         if self.is_searching {
-            self.cmd_text_input.text_input_ref().set_key_focus(cx);
+            self.cmd_text_input.text_input_ref(cx).set_key_focus(cx);
         }
     }
 
@@ -1064,11 +1062,11 @@ impl MentionableTextInput {
         self.members_loading = false; // Reset loading state when closing popup
 
         // Clear list items to avoid keeping old content when popup is shown again
-        self.cmd_text_input.clear_items();
+        self.cmd_text_input.clear_items(cx);
 
         // Get popup and header view references
-        let popup = self.cmd_text_input.view(ids!(popup));
-        let header_view = self.cmd_text_input.view(ids!(popup.header_view));
+        let popup = self.cmd_text_input.view(cx, ids!(popup));
+        let header_view = self.cmd_text_input.view(cx, ids!(popup.header_view));
 
         // Force hide header view - necessary when handling deletion operations
         // When backspace-deleting mentions, we want to completely hide the header
@@ -1076,9 +1074,7 @@ impl MentionableTextInput {
 
         // Hide the entire popup
         popup.set_visible(cx, false);
-
-        // Reset popup height
-        popup.apply_over(cx, live! { height: Fit });
+        let _ = popup;
 
         // Ensure header view is reset to visible next time it's triggered
         // This will happen before update_user_list is called in handle_text_change
@@ -1088,13 +1084,13 @@ impl MentionableTextInput {
     }
 
     /// Returns the current text content
-    pub fn text(&self) -> String {
-        self.cmd_text_input.text_input_ref().text()
+    pub fn text(&self, cx: &Cx) -> String {
+        self.cmd_text_input.text_input_ref(cx).text()
     }
 
     /// Sets the text content
     pub fn set_text(&mut self, cx: &mut Cx, text: &str) {
-        self.cmd_text_input.text_input_ref().set_text(cx, text);
+        self.cmd_text_input.text_input_ref(cx).set_text(cx, text);
         self.redraw(cx);
     }
 
@@ -1115,14 +1111,14 @@ impl MentionableTextInput {
 }
 
 impl MentionableTextInputRef {
-    pub fn text(&self) -> String {
-        self.borrow().map_or_else(String::new, |inner| inner.text())
+    pub fn text(&self, cx: &Cx) -> String {
+        self.borrow().map_or_else(String::new, |inner| inner.text(cx))
     }
 
     /// Returns a reference to the inner `TextInput` widget.
-    pub fn text_input_ref(&self) -> TextInputRef {
+    pub fn text_input_ref(&self, cx: &Cx) -> TextInputRef {
         self.borrow()
-            .map(|inner| inner.cmd_text_input.text_input_ref())
+            .map(|inner| inner.cmd_text_input.text_input_ref(cx))
             .unwrap_or_default()
     }
 
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index 0a8395674..825dd1ca0 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -1,7 +1,6 @@
-use makepad_widgets::Cx;
+use makepad_widgets::ScriptVm;
 
 pub mod avatar;
-pub mod callout_tooltip;
 pub mod collapsible_header;
 pub mod confirmation_modal;
 pub mod helpers;
@@ -15,31 +14,32 @@ pub mod styles;
 pub mod text_or_image;
 pub mod timestamp;
 pub mod bouncing_dots;
+pub mod command_text_input;
 pub mod unread_badge;
 pub mod verification_badge;
 pub mod restore_status_view;
 pub mod image_viewer;
 
 
-pub fn live_design(cx: &mut Cx) {
+pub fn script_mod(vm: &mut ScriptVm) {
     // Order matters here, as some widget definitions depend on others.
-    styles::live_design(cx);
-    helpers::live_design(cx);
-    icon_button::live_design(cx);
-    unread_badge::live_design(cx);
-    collapsible_header::live_design(cx);
-    timestamp::live_design(cx);
-    room_filter_input_bar::live_design(cx);
-    avatar::live_design(cx);
-    text_or_image::live_design(cx);
-    html_or_plaintext::live_design(cx);
-    bouncing_dots::live_design(cx);
-    jump_to_bottom_button::live_design(cx);
-    popup_list::live_design(cx);
-    verification_badge::live_design(cx);
-    callout_tooltip::live_design(cx);
-    mentionable_text_input::live_design(cx);
-    restore_status_view::live_design(cx);
-    confirmation_modal::live_design(cx);
-    image_viewer::live_design(cx);
+    styles::script_mod(vm);
+    helpers::script_mod(vm);
+    icon_button::script_mod(vm);
+    unread_badge::script_mod(vm);
+    collapsible_header::script_mod(vm);
+    timestamp::script_mod(vm);
+    room_filter_input_bar::script_mod(vm);
+    avatar::script_mod(vm);
+    text_or_image::script_mod(vm);
+    html_or_plaintext::script_mod(vm);
+    bouncing_dots::script_mod(vm);
+    jump_to_bottom_button::script_mod(vm);
+    popup_list::script_mod(vm);
+    verification_badge::script_mod(vm);
+    command_text_input::script_mod(vm);
+    mentionable_text_input::script_mod(vm);
+    restore_status_view::script_mod(vm);
+    confirmation_modal::script_mod(vm);
+    image_viewer::script_mod(vm);
 }
diff --git a/src/shared/popup_list.rs b/src/shared/popup_list.rs
index b9b7f6073..2322cd563 100644
--- a/src/shared/popup_list.rs
+++ b/src/shared/popup_list.rs
@@ -1,6 +1,8 @@
 use std::borrow::Cow;
 use crossbeam_queue::SegQueue;
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
+use crate::{LivePtr, view_from_live_ptr};
 
 use crate::shared::styles::*;
 
@@ -55,7 +57,7 @@ pub fn get_global_popup_list(cx: &mut Cx) -> &mut RobrixPopupNotificationRef {
 pub fn set_global_popup_list(cx: &mut Cx, parent_ref: &WidgetRef) {
     Cx::set_global(
         cx,
-        parent_ref.robrix_popup_notification(ids!(popup_notification)),
+        parent_ref.robrix_popup_notification(cx, ids!(popup_notification)),
     );
 }
 
@@ -88,71 +90,70 @@ pub struct PopupItem {
     pub kind: PopupKind,
 }
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.CheckIcon = View {
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
-    CheckIcon = <View> {
         width: 28,
         height: 28,
         visible: false,
-        <Icon> {
-            draw_icon: {
-                svg_file: (ICON_CHECKMARK),
+        Icon {
+            draw_icon +: {
+                svg: (ICON_CHECKMARK),
                 color: #ffffff,
             }
-            icon_walk: { width: 22, height: 22 }
+            icon_walk: Walk{ width: 22, height: 22 }
         }
     }
-    ForbiddenIcon = <CheckIcon> {
-        <Icon> {
-            draw_icon: {
-                svg_file: (ICON_FORBIDDEN),
+    mod.widgets.ForbiddenIcon = mod.widgets.CheckIcon {
+        Icon {
+            draw_icon +: {
+                svg: (ICON_FORBIDDEN),
                 color: #ffffff,
             }
-            icon_walk: { width: 22, height: 22 }
+            icon_walk: Walk{ width: 22, height: 22 }
         }
     }
-    InfoIcon = <CheckIcon> {
-        <Icon> {
-            draw_icon: {
-                svg_file: (ICON_INFO),
+    mod.widgets.InfoIcon = mod.widgets.CheckIcon {
+        Icon {
+            draw_icon +: {
+                svg: (ICON_INFO),
                 color: #ffffff,
             }
-            icon_walk: { width: 22, height: 22 }
+            icon_walk: Walk{ width: 22, height: 22 }
         }
     }
-    WarningIcon = <CheckIcon> {
-        <Icon> {
-            draw_icon: {
-                svg_file: (ICON_WARNING),
+    mod.widgets.WarningIcon = mod.widgets.CheckIcon {
+        Icon {
+            draw_icon +: {
+                svg: (ICON_WARNING),
                 color: #ffffff,
             }
-            icon_walk: { width: 22, height: 22 }
+            icon_walk: Walk{ width: 22, height: 22 }
         }
     }
-    ProgressBar = <View> {
+    mod.widgets.ProgressBar = View {
         width: Fill,
         height: 10,
         show_bg: true,
-        margin: { bottom: 0 },
+        margin: Inset{ bottom: 0 },
         padding: 0,
-        draw_bg: {
-            uniform direction: 0.0, // Direction of the progress bar: 0.0 is right to left, 1.0 is top to bottom.
-            uniform border_radius: 4.,
-            uniform border_size: 1.0,
-            uniform progress_bar_color: #00000080, //Black with 50% opacity.
-            uniform display_progress_bar: 1.0 // Display progress bar when there is auto_dismissal_duration.
+        draw_bg +: {
+            direction: uniform(0.0), // Direction of the progress bar: 0.0 is right to left, 1.0 is top to bottom.
+            border_radius: uniform(4.),
+            border_size: uniform(1.0),
+            progress_bar_color: uniform(#00000080), //Black with 50% opacity.
+            // Display progress bar when there is auto_dismissal_duration.
+            display_progress_bar: uniform(1.0)
             // Display progress bar even when mode.slide is off.
             // 0.0 animate according to anim_time and anim_duration, 1.0 displays oscillating progress bar.
-            uniform debug_progress_bar: 0.0,
-            uniform anim_time: 0.0,
-            uniform anim_duration: 2.0,
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+            debug_progress_bar: uniform(0.0),
+            anim_time: uniform(0.0),
+            anim_duration: uniform(2.0),
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 let rect_size = self.rect_size;
                 let time = self.anim_time / self.anim_duration;
                 if self.debug_progress_bar > 0.5 {
@@ -184,76 +185,76 @@ live_design! {
             }
         }
     }
-    MainContent = <View> {
+    mod.widgets.MainContent = View {
         width: Fill,
         height: Fit,
-        align: { x: 0.0, y: 0.5 }
-        padding: {left: 0, top: 0, bottom: 10, right: 5}
-        popup_label = <Label> {
+        align: Align{ x: 0.0, y: 0.5 }
+        padding: Inset{left: 0, top: 0, bottom: 10, right: 5}
+        popup_label := Label {
             width: Fill,
             height: Fit,
-            draw_text: {
+            draw_text +: {
                 color: (#000000),
-                text_style: <MESSAGE_TEXT_STYLE>{ font_size: 10 },
-                wrap: Word
+                text_style: mod.widgets.MESSAGE_TEXT_STYLE { font_size: 10 },
             }
         }
     }
-    LeftSideView = <View> {
+    mod.widgets.LeftSideView = View {
         width: Fit,
         height: Fit,
-        success_icon = <CheckIcon> {}
-        error_icon = <ForbiddenIcon> {}
-        info_icon = <InfoIcon> {}
-        warning_icon = <WarningIcon> {}
+        success_icon := mod.widgets.CheckIcon {}
+        error_icon := mod.widgets.ForbiddenIcon {}
+        info_icon := mod.widgets.InfoIcon {}
+        warning_icon := mod.widgets.WarningIcon {}
     }
-    CloseButtonView = <View> {
+
+    mod.widgets.CloseButtonView = View {
         width: Fill,
         height: Fit,
         flow: Down,
-        padding: { top: 3 }
-        align: { x: 0.98 }
+        padding: Inset{ top: 3 }
+        align: Align{ x: 0.98 }
         
-        <RoundedView> {
+        RoundedView {
             width: Fit, height: Fit
             show_bg: true,
-            draw_bg: {
-                color: (COLOR_BG_DISABLED)
+            draw_bg +: {
+                color: instance((COLOR_BG_DISABLED))
             }
-            align: { x: 0.5, y: 0.5 }
+            align: Align{ x: 0.5, y: 0.5 }
             // The "X" close button on the top right
-            close_button = <RobrixIconButton> {
+            close_button := RobrixIconButton {
                 width: Fit, height: Fit,
-                padding: { top: 5, bottom: 5, left: 8, right: 8 },
+                padding: Inset{ top: 5, bottom: 5, left: 8, right: 8 },
                 spacing: 0,
-                align: { x: 0.5, y: 0.5 }
-                draw_bg: {
-                    color: (COLOR_BG_DISABLED)
+                align: Align{ x: 0.5, y: 0.5 }
+                draw_bg +: {
+                    color: instance((COLOR_BG_DISABLED))
                 }
-                draw_icon: {
-                    svg_file: (ICON_CLOSE),
+                draw_icon +: {
+                    svg: (ICON_CLOSE),
                     color: (COLOR_DIVIDER_DARK),
                 }
-                icon_walk: {width: 15, height: 15}
+                icon_walk: Walk{width: 15, height: 15}
             }
         }
     }
     // Other possible color themes that is not too glaring.
     // COLOR_POPUP_GREEN = #43bb9e;
     // COLOR_POPUP_RED = #e74c3c;
-    PopupDialogRightToLeftProgress = <RoundedView> {
+    mod.widgets.PopupDialogRightToLeftProgress = RoundedView {
         width: 275
         height: Fit
         padding: 0,
         flow: Overlay
         show_bg: true,
-        draw_bg: {
-            uniform border_radius: 4.0
-            uniform border_color: #000000
-            uniform border_size: 2.0
-            instance background_color: #ffffff
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+        draw_bg +: {
+            border_radius: uniform(4.0)
+            border_color: uniform(#000000)
+            border_size: uniform(2.0)
+            background_color: instance(#ffffff)
+            pixel: fn() {
+                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
                 sdf.box(
                     1.,
                     1.,
@@ -274,152 +275,146 @@ live_design! {
             }
         }
 
-        popup_content = <View> {
+        popup_content := View {
             width: Fill, height: Fit,
             flow: Down
             //Right side view with close button
-            close_button_view = <CloseButtonView> {}
-            padding: { right: 2, top: 2}
-            inner = <View> {
+            close_button_view := mod.widgets.CloseButtonView {}
+            padding: Inset{ right: 2, top: 2}
+            inner := View {
                 width: Fill, height: Fit,
-                padding: { top: 0, right: 5, bottom: 0, left: 10 }
+                padding: Inset{ top: 0, right: 5, bottom: 0, left: 10 }
                 flow: Right,
-                align: {
+                align: Align{
                     y: 0,
                 }
                 // Left side with icon for popup kind.
-                <LeftSideView> {}
+                mod.widgets.LeftSideView {}
                 // Main content area
-                main_content = <MainContent> {}
+                main_content := mod.widgets.MainContent {}
             }
-            progress_bar = <ProgressBar> {}
+            progress_bar := mod.widgets.ProgressBar {}
             // Add a small gap between the progress bar and the end of the popup 
             // to ensure the progress bar is within the popup.
-            <View> {
+            View {
                 height: 0.2
             }
         }
 
-        animator: {
-            mode = {
-                default: close_slider,
-                close_slider = {
-                    redraw: true,
+        animator: Animator{
+            mode: {
+                default: @close_slider
+                close_slider: AnimatorState{
+                    redraw: true
                     from: {all: Forward {duration: 0.0}}
                     apply: {
-                        popup_content = {
-                            progress_bar = {
+                        popup_content: {
+                            progress_bar: {
                                 draw_bg: {anim_time: 0.0}
                             }
                         }
                     }
                 }
-                slide = {
-                    redraw: true,
+                slide: AnimatorState{
+                    redraw: true
                     // Maximum auto dismissal duration is 3 minutes.
                     from: {all: Forward {duration: 180.0}}
                     apply: {
-                        popup_content = {
-                            progress_bar = {
+                        popup_content: {
+                            progress_bar: {
                                 draw_bg: {anim_time: 180.0}
                             }
                         }
                     }
                 }
             }
-            hover = {
-                default: off
-                off = {
-                    apply: { }
-                }
-                on = {
-                    apply: { }
-                }
+            hover: {
+                default: @off
+                off: AnimatorState{ apply: { } }
+                on: AnimatorState{ apply: { } }
             }
-            down = {
-                default: off
-                off = {
-                    apply: { }
-                }
-                on = {
-                    apply: { }
-                }
+            down: {
+                default: @off
+                off: AnimatorState{ apply: { } }
+                on: AnimatorState{ apply: { } }
             }
         }
     }
-    PopupDialogTopToBottomProgress = <PopupDialogRightToLeftProgress> {
-        popup_content = <View> {
+    mod.widgets.PopupDialogTopToBottomProgress = mod.widgets.PopupDialogRightToLeftProgress {
+        popup_content := View {
             width: Fill,
             height: Fit,
             flow: Right,
             spacing: 0,
-            align: { x: 0.0, y: 0.5 }
+            align: Align{ x: 0.0, y: 0.5 }
             // Left side with for popup kind.
-            <LeftSideView> {
+            mod.widgets.LeftSideView {
                 height: Fit,
-                margin: {left: 10 }
+                margin: Inset{left: 10 }
                 spacing: 0,
             }
-            inner = <View> {
+            inner := View {
                 width: 230,
                 height: Fit,
                 padding: 0,
                 flow: Down,
-                close_button_view = <CloseButtonView> {}
+                close_button_view := mod.widgets.CloseButtonView {}
                 // Main content area
-                main_content = <MainContent> {
-                    padding: {left: 0}
+                main_content := mod.widgets.MainContent {
+                    padding: Inset{left: 0}
                 }
             }
-            progress_bar = <ProgressBar> {
+            progress_bar := mod.widgets.ProgressBar {
                 width: 10,
                 height: Fill,
-                draw_bg: {
-                    uniform direction: 1.0,
-                    uniform anim_time: 1.0,
-                    uniform border_radius: 2.,
+                draw_bg +: {
+                    direction: uniform(1.0),
+                    anim_time: uniform(1.0),
+                    border_radius: uniform(2.),
                 }
             }
         }
     }
-    pub RobrixPopupNotificationRightToLeftProgress = {{RobrixPopupNotification}} {
+
+    mod.widgets.RobrixPopupNotificationRightToLeftProgress = set_type_default() do #(RobrixPopupNotification::register_widget(vm)) {
+        ..mod.widgets.SolidView
+
         width: 275
         height: Fit
         flow: Down
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                return vec4(0., 0., 0., 0.0)
-            }
-        }
-        content: <PopupDialogRightToLeftProgress> {}
+        draw_bg.color: (COLOR_TRANSPARENT)
+        content: mod.widgets.PopupDialogRightToLeftProgress {}
     }
-    pub RobrixPopupNotificationTopToBottomProgress = <RobrixPopupNotificationRightToLeftProgress> {
-        content: <PopupDialogTopToBottomProgress> {}
+
+    mod.widgets.RobrixPopupNotificationTopToBottomProgress = mod.widgets.RobrixPopupNotificationRightToLeftProgress {
+        content: mod.widgets.PopupDialogTopToBottomProgress {}
     }
+
     // A widget that displays a vertical list of popups at the top right corner of the screen.
     // The progress bar slides from right to left.
-    pub PopupList = <View> {
+    mod.widgets.PopupList = View {
         width: Fill,
         height: Fill,
-        margin: { top: 10 }
-        align: {x: 0.99, }
-        popup_notification = <RobrixPopupNotificationRightToLeftProgress>{}
+        margin: Inset{ top: 10 }
+        align: Align{x: 0.99, }
+        popup_notification := mod.widgets.RobrixPopupNotificationRightToLeftProgress {}
     }
+
     // A widget that displays a vertical list of popups at the top right corner of the screen.
     // The progress bar slides from top to bottom.
-    pub PopupListTopToBottomProgress = <PopupList> {
-        popup_notification = <RobrixPopupNotificationTopToBottomProgress>{}
+    mod.widgets.PopupListTopToBottomProgress = mod.widgets.PopupList {
+        popup_notification := mod.widgets.RobrixPopupNotificationTopToBottomProgress {}
     }
 }
 
 /// A widget that displays a vertical list of popups.
-#[derive(Live, Widget)]
+#[derive(Script, Widget)]
 pub struct RobrixPopupNotification {
     #[live]
     pub content: Option<LivePtr>,
 
-    #[rust(DrawList2d::new(cx))]
-    draw_list: DrawList2d,
+    #[rust]
+    draw_list: Option<DrawList2d>,
 
     #[redraw]
     #[live]
@@ -433,24 +428,23 @@ pub struct RobrixPopupNotification {
     pub popups: Vec<(View, PopupItem, Timer)>,
 }
 
-impl LiveHook for RobrixPopupNotification {
-    fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
-        for (view, popup_item, _) in self.popups.iter_mut() {
-            if let Some(index) = nodes.child_by_name(index, id!(content).as_field()) {
-                view.apply(cx, apply, index, nodes);
-                view.label(ids!(popup_label))
-                    .set_text(cx, &popup_item.message);
-                for (view, (popup_kind, _color)) in view.view_set(ICON_SET).iter().zip(POPUP_KINDS)
-                {
-                    if popup_item.kind == popup_kind {
-                        view.set_visible(cx, true);
-                    } else {
-                        view.set_visible(cx, false);
-                    }
-                }
+impl ScriptHook for RobrixPopupNotification {
+    fn on_after_new(&mut self, vm: &mut ScriptVm) {
+        self.draw_list = Some(DrawList2d::script_new(vm));
+    }
+
+    fn on_after_apply(
+        &mut self,
+        vm: &mut ScriptVm,
+        _apply: &Apply,
+        _scope: &mut Scope,
+        _value: ScriptValue,
+    ) {
+        vm.with_cx_mut(|cx| {
+            if let Some(draw_list) = &self.draw_list {
+                draw_list.redraw(cx);
             }
-        }
-        self.draw_list.redraw(cx);
+        });
     }
 }
 
@@ -477,7 +471,8 @@ impl Widget for RobrixPopupNotification {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.draw_list.begin_overlay_reuse(cx);
+        let draw_list = self.draw_list.as_mut().unwrap();
+        draw_list.begin_overlay_reuse(cx);
         self.draw_bg.begin(cx, walk, self.layout);
         if !self.popups.is_empty() {
             cx.begin_turtle(walk, self.layout);
@@ -488,7 +483,7 @@ impl Widget for RobrixPopupNotification {
             cx.end_turtle();
         }
         self.draw_bg.end(cx);
-        self.draw_list.end(cx);
+        draw_list.end(cx);
         DrawStep::done()
     }
 }
@@ -499,11 +494,11 @@ impl RobrixPopupNotification {
     /// The popup's content is a string given by the `PopupItem` parameter.
     /// New popup will be displayed below the previous ones.
     pub fn push(&mut self, cx: &mut Cx, popup_item: PopupItem) {
-        let mut view = View::new_from_ptr(cx, self.content);
+        let mut view = view_from_live_ptr(cx, self.content);
         let mut background_color = None;
-        view.label(ids!(popup_label))
+        view.label(cx, ids!(popup_label))
             .set_text(cx, &popup_item.message);
-        for (view, (popup_kind, color)) in view.view_set(ICON_SET).iter().zip(POPUP_KINDS) {
+        for (view, (popup_kind, color)) in view.view_set(cx, ICON_SET).iter().zip(POPUP_KINDS) {
             if popup_item.kind == popup_kind {
                 view.set_visible(cx, true);
                 background_color = Some(color);
@@ -512,28 +507,28 @@ impl RobrixPopupNotification {
             }
         }
         // Apply popup item kind-specific styling
-        if let Some(background_color) = background_color {
-            let text_color = if popup_item.kind == PopupKind::Warning {
+        if let Some(_background_color) = background_color {
+            let _text_color = if popup_item.kind == PopupKind::Warning {
                 vec4(0.0, 0.0, 0.0, 1.0) // Black text for Warning
             } else {
                 COLOR_WHITE // White text for all other kinds
             };
             
-            view.apply_over(
+            (&mut view).apply_over(
                 cx,
                 live! {
-                    popup_content = {
-                        inner = {
-                            main_content = {
-                                popup_label = {
+                    popup_content: {
+                        inner: {
+                            main_content: {
+                                popup_label: {
                                     draw_text: {
                                         color: (text_color),
                                     }
                                 }
                             }
                             // For top to bottom progress bar.
-                            close_button_view = {
-                                close_button = {
+                            close_button_view: {
+                                close_button: {
                                     draw_icon: {
                                         color: (text_color),
                                     }
@@ -541,8 +536,8 @@ impl RobrixPopupNotification {
                             }
                         }
                         // For Right to left progress bar.
-                        close_button_view = {
-                            close_button = {
+                        close_button_view: {
+                            close_button: {
                                 draw_icon: {
                                     color: (text_color),
                                 }
@@ -556,11 +551,11 @@ impl RobrixPopupNotification {
             );
         }
         let close_timer = if let Some(duration) = popup_item.auto_dismissal_duration {
-            view.apply_over(
+            (&mut view).apply_over(
                 cx,
                 live! {
-                    popup_content = {
-                        progress_bar = {
+                    popup_content: {
+                        progress_bar: {
                             draw_bg: { anim_duration: (duration) }
                         }
                     }
@@ -569,11 +564,11 @@ impl RobrixPopupNotification {
             view.animator_play(cx, ids!(mode.slide));
             cx.start_timeout(duration)
         } else {
-            view.apply_over(
+            (&mut view).apply_over(
                 cx,
                 live! {
-                    popup_content = {
-                        progress_bar = {
+                    popup_content: {
+                        progress_bar: {
                             draw_bg: { display_progress_bar: 0.0 }
                         }
                     }
@@ -611,7 +606,7 @@ impl RobrixPopupNotification {
     ///     message: Cow::Borrowed("Welcome!"),
     ///     auto_dismissal_duration: Some(4.0),
     /// };
-    ///  view.label(ids!(popup_label))
+    ///  view.label(cx, ids!(popup_label))
     ///     .set_text(cx, &popup_item.message);
     ///  let close_timer = if let Some(duration) = popup_item.auto_dismissal_duration {
     ///     cx.start_timeout(duration)
@@ -643,7 +638,7 @@ impl RobrixPopupNotification {
 impl WidgetMatchEvent for RobrixPopupNotification {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
         for (i, (view, _popup_item, close_timer)) in self.popups.iter_mut().enumerate() {
-            if view.button(ids!(close_button)).clicked(actions) {
+            if view.button(cx, ids!(close_button)).clicked(actions) {
                 cx.stop_timer(*close_timer);
                 view.animator_cut(cx, ids!(mode.close_slider));
                 self.popups.remove(i);
diff --git a/src/shared/restore_status_view.rs b/src/shared/restore_status_view.rs
index d75bc5eba..b366775e2 100644
--- a/src/shared/restore_status_view.rs
+++ b/src/shared/restore_status_view.rs
@@ -8,35 +8,34 @@
 use makepad_widgets::*;
 use crate::utils::RoomNameId;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.RestoreStatusView = #(RestoreStatusView::register_widget(vm)) {
 
-    pub RestoreStatusView = {{RestoreStatusView}} {
         width: Fill, height: Fit,
         flow: Down,
-        align: {x: 0.5, y: 0.5},
+        align: Align{x: 0.5, y: 0.5},
         padding: 20,
 
-        restore_status_spinner = <LoadingSpinner> {
+        restore_status_spinner := LoadingSpinner {
             width: 50,
             height: 50,
             visible: true,
-            draw_bg: {
-                color: (COLOR_ACTIVE_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_ACTIVE_PRIMARY))
                 border_size: 3.0,
             }
         }
 
-        restore_status_label = <Label> {
+        restore_status_label := Label {
             width: Fill, height: Fit,
-            align: {x: 0.5, y: 0.0},
-            padding: {left: 5.0, right: 0.0}
-            margin: {top: 10.0},
-            flow: RightWrap,
-            draw_text: {
+            align: Align{x: 0.5, y: 0.0},
+            padding: Inset{left: 5.0, right: 0.0}
+            margin: Inset{top: 10.0},
+            flow: Flow.Right{wrap: true},
+            draw_text +: {
                 color: (TYPING_NOTICE_TEXT_COLOR),
             }
         }
@@ -44,7 +43,7 @@ live_design! {
 }
 
 /// A view that displays a spinner and a label to indicate that a restore operation is in progress for a room.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RestoreStatusView {
     #[deref] view: View,
     #[live(true)] visible: bool,
@@ -75,7 +74,7 @@ impl RestoreStatusViewRef {
         if let Some(mut inner) = self.borrow_mut() {
             inner.visible = visible;
             if !visible {
-                inner.label(ids!(restore_status_label))
+                inner.label(cx, ids!(restore_status_label))
                     .set_text(cx, "");
             }
         }
@@ -99,8 +98,8 @@ impl RestoreStatusViewRef {
         room_name: &RoomNameId,
     ) {
         let Some(inner) = self.borrow() else { return };
-        let restore_status_spinner = inner.view.view(ids!(restore_status_spinner));
-        let restore_status_label = inner.view.label(ids!(restore_status_label));
+        let restore_status_spinner = inner.view.view(cx, ids!(restore_status_spinner));
+        let restore_status_label = inner.view.label(cx, ids!(restore_status_label));
         if all_rooms_loaded {
             restore_status_spinner.set_visible(cx, false);
             restore_status_label.set_text(
diff --git a/src/shared/room_filter_input_bar.rs b/src/shared/room_filter_input_bar.rs
index c47c145f2..b3c001a77 100644
--- a/src/shared/room_filter_input_bar.rs
+++ b/src/shared/room_filter_input_bar.rs
@@ -1,72 +1,70 @@
 //! A text input used to filter the rooms list
 //! with a search icon and a button to clear the input.
 //!
-//! This is a dedicated widget instead of a general "SearchBar"
-//! in order for us to be able to place it inside of a `CachedWidget`
-//! and have a single instance be shared across the Mobile and Desktop app views.
+//! This is a dedicated widget instead of a general "SearchBar" so it can be
+//! reused consistently across both Desktop and Mobile layouts.
 
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub RoomFilterInputBar = {{RoomFilterInputBar}}<RoundedView> {
+    mod.widgets.RoomFilterInputBar = set_type_default() do #(RoomFilterInputBar::register_widget(vm)) {
+        ..mod.widgets.RoundedView
+
         width: Fill,
         height: 35,
 
         show_bg: true,
-        draw_bg: {
-            color: (COLOR_PRIMARY),
+        draw_bg +: {
+            color: instance((COLOR_PRIMARY)),
             border_radius: 4.0,
-            border_color: (COLOR_SECONDARY),
+            border_color: instance((COLOR_SECONDARY)),
             border_size: 1.0,
         }
 
-        padding: {top: 3, bottom: 3, left: 10, right: 4.5}
+        padding: Inset{top: 3, bottom: 3, left: 10, right: 4.5}
         margin: 0
         spacing: 4,
-        align: {x: 0.0, y: 0.5},
+        align: Align{x: 0.0, y: 0.5},
 
-        <Icon> {
-            draw_icon: {
-                svg_file: (ICON_SEARCH),
-                fn get_color(self) -> vec4 {
+        Icon {
+            draw_icon +: {
+                svg: (ICON_SEARCH),
+                get_color: fn() -> vec4 {
                     return (COLOR_TEXT_INPUT_IDLE);
                 }
             }
-            icon_walk: {width: 14, height: Fit}
+            icon_walk: Walk{width: 14, height: 14}
         }
 
-        input = <RobrixTextInput> {
+        input := RobrixTextInput {
             width: Fill,
             height: Fit,
             flow: Right, // do not wrap
 
             empty_text: "Filter rooms & spaces..."
 
-            draw_text: {
-                text_style: { font_size: 10 },
+            draw_text +: {
+                text_style: theme.font_regular { font_size: 10 },
             }
         }
 
-        clear_button = <RobrixIconButton> {
+        clear_button := RobrixIconButton {
             visible: false,
-            padding: {top: 5, bottom: 5, left: 9, right: 9},
+            padding: Inset{top: 5, bottom: 5, left: 9, right: 9},
             spacing: 0,
-            align: {x: 0.5, y: 0.5}
-            draw_bg: {
-                color: (COLOR_SECONDARY)
+            align: Align{x: 0.5, y: 0.5}
+            draw_bg +: {
+                color: instance((COLOR_SECONDARY))
             }
-            draw_icon: {
-                svg_file: (ICON_CLOSE),
+            draw_icon +: {
+                svg: (ICON_CLOSE),
                 color: (COLOR_TEXT)
             }
-            icon_walk: {width: Fit, height: 10, margin: 0}
+            icon_walk: Walk{width: Fit, height: 10, margin: 0}
         }
     }
 }
@@ -74,19 +72,27 @@ live_design! {
 /// A text input (with a search icon and cancel button) used to filter the rooms list.
 ///
 /// See the module-level docs for more detail.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct RoomFilterInputBar {
     #[deref] view: View,
 }
 
 /// Actions emitted by the `RoomFilterInputBar` based on user interaction with it.
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum RoomFilterAction {
     /// The user has changed the text entered into the filter bar.
     Changed(String),
+    #[default]
     None,
 }
 
+impl ActionDefaultRef for RoomFilterAction {
+    fn default_ref() -> &'static Self {
+        static DEFAULT: RoomFilterAction = RoomFilterAction::None;
+        &DEFAULT
+    }
+}
+
 impl Widget for RoomFilterInputBar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
@@ -99,9 +105,9 @@ impl Widget for RoomFilterInputBar {
 }
 
 impl WidgetMatchEvent for RoomFilterInputBar {
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
-        let input = self.text_input(ids!(input));
-        let clear_button = self.button(ids!(clear_button));
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
+        let input = self.text_input(cx, ids!(input));
+        let clear_button = self.button(cx, ids!(clear_button));
 
         // Handle user changing the input text
         if let Some(keywords) = input.changed(actions) {
@@ -115,8 +121,7 @@ impl WidgetMatchEvent for RoomFilterInputBar {
             clear_button.set_visible(cx, !keywords.is_empty());
             clear_button.reset_hover(cx);
             cx.widget_action(
-                self.widget_uid(),
-                &scope.path,
+                self.widget_uid(), 
                 RoomFilterAction::Changed(keywords)
             );
         }
@@ -126,8 +131,7 @@ impl WidgetMatchEvent for RoomFilterInputBar {
             clear_button.set_visible(cx, false);
             input.set_key_focus(cx);
             cx.widget_action(
-                self.widget_uid(),
-                &scope.path,
+                self.widget_uid(), 
                 RoomFilterAction::Changed(String::new())
             );
         }
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 661035944..314efd986 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -1,240 +1,227 @@
 use makepad_widgets::*;
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-
-    pub ICON_ADD             = dep("crate://self/resources/icons/add.svg")
-    pub ICON_ADD_REACTION    = dep("crate://self/resources/icons/add_reaction.svg")
-    pub ICON_ADD_USER        = dep("crate://self/resources/icons/add_user.svg") // TODO: FIX
-    pub ICON_ADD_WALLET      = dep("crate://self/resources/icons/add_wallet.svg")
-    pub ICON_FORBIDDEN       = dep("crate://self/resources/icons/forbidden.svg")
-    pub ICON_CHECKMARK       = dep("crate://self/resources/icons/checkmark.svg")
-    pub ICON_CLOSE           = dep("crate://self/resources/icons/close.svg")
-    pub ICON_CLOUD_CHECKMARK = dep("crate://self/resources/icons/cloud_checkmark.svg")
-    pub ICON_CLOUD_OFFLINE   = dep("crate://self/resources/icons/cloud_offline.svg")
-    pub ICON_ROTATE_CW       = dep("crate://self/resources/icons/rotate_right_fa.svg")
-    pub ICON_ROTATE_CCW      = dep("crate://self/resources/icons/rotate_left_fa.svg")
-    pub ICON_COPY            = dep("crate://self/resources/icons/copy.svg")
-    pub ICON_EDIT            = dep("crate://self/resources/icons/edit.svg")
-    pub ICON_EXTERNAL_LINK   = dep("crate://self/resources/icons/external_link.svg")
-    pub ICON_IMPORT          = dep("crate://self/resources/icons/import.svg") // TODO: FIX
-    pub ICON_HIERARCHY       = dep("crate://self/resources/icons/hierarchy.svg")
-    pub ICON_HOME            = dep("crate://self/resources/icons/home.svg")
-    pub ICON_HTML_FILE       = dep("crate://self/resources/icons/html_file.svg")
-    pub ICON_INFO            = dep("crate://self/resources/icons/info.svg")
-    pub ICON_INVITE          = dep("crate://self/resources/icons/invite.svg")
-    pub ICON_JOIN_ROOM       = dep("crate://self/resources/icons/join_room.svg")
-    pub ICON_JUMP            = dep("crate://self/resources/icons/go_back.svg")
-    pub ICON_LOGOUT          = dep("crate://self/resources/icons/logout.svg")
-    pub ICON_LINK            = dep("crate://self/resources/icons/link.svg")
-    pub ICON_PIN             = dep("crate://self/resources/icons/pin.svg")
-    pub ICON_REPLY           = dep("crate://self/resources/icons/reply.svg")
-    pub ICON_SEARCH          = dep("crate://self/resources/icons/search.svg")
-    pub ICON_SEND            = dep("crate://self/resources/icon_send.svg")
-    pub ICON_SETTINGS        = dep("crate://self/resources/icons/settings.svg")
-    pub ICON_SQUARES         = dep("crate://self/resources/icons/squares_filled.svg")
-    pub ICON_TOMBSTONE       = dep("crate://self/resources/icons/tombstone.svg")
-    pub ICON_TRASH           = dep("crate://self/resources/icons/trash.svg")
-    pub ICON_UPLOAD          = dep("crate://self/resources/icons/upload.svg")
-    pub ICON_VIEW_SOURCE     = dep("crate://self/resources/icons/view_source.svg")
-    pub ICON_WARNING         = dep("crate://self/resources/icons/warning.svg")
-    pub ICON_ZOOM_IN         = dep("crate://self/resources/icons/zoom_in.svg")
-    pub ICON_ZOOM_OUT        = dep("crate://self/resources/icons/zoom_out.svg")
-
-    pub TITLE_TEXT = <THEME_FONT_REGULAR>{
+script_mod! {
+
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.ICON_ADD              = crate_resource("self://resources/icons/add.svg")
+    mod.widgets.ICON_ADD_REACTION     = crate_resource("self://resources/icons/add_reaction.svg")
+    mod.widgets.ICON_ADD_USER         = crate_resource("self://resources/icons/add_user.svg") // TODO: FIX
+    mod.widgets.ICON_ADD_WALLET       = crate_resource("self://resources/icons/add_wallet.svg")
+    mod.widgets.ICON_FORBIDDEN        = crate_resource("self://resources/icons/forbidden.svg")
+    mod.widgets.ICON_CHECKMARK        = crate_resource("self://resources/icons/checkmark.svg")
+    mod.widgets.ICON_CLOSE            = crate_resource("self://resources/icons/close.svg")
+    mod.widgets.ICON_CLOUD_CHECKMARK  = crate_resource("self://resources/icons/cloud_checkmark.svg")
+    mod.widgets.ICON_CLOUD_OFFLINE    = crate_resource("self://resources/icons/cloud_offline.svg")
+    mod.widgets.ICON_ROTATE_CW        = crate_resource("self://resources/icons/rotate_right_fa.svg")
+    mod.widgets.ICON_ROTATE_CCW       = crate_resource("self://resources/icons/rotate_left_fa.svg")
+    mod.widgets.ICON_COPY             = crate_resource("self://resources/icons/copy.svg")
+    mod.widgets.ICON_EDIT             = crate_resource("self://resources/icons/edit.svg")
+    mod.widgets.ICON_EXTERNAL_LINK    = crate_resource("self://resources/icons/external_link.svg")
+    mod.widgets.ICON_IMPORT           = crate_resource("self://resources/icons/import.svg") // TODO: FIX
+    mod.widgets.ICON_HIERARCHY        = crate_resource("self://resources/icons/hierarchy.svg")
+    mod.widgets.ICON_HOME             = crate_resource("self://resources/icons/home.svg")
+    mod.widgets.ICON_HTML_FILE        = crate_resource("self://resources/icons/html_file.svg")
+    mod.widgets.ICON_INFO             = crate_resource("self://resources/icons/info.svg")
+    mod.widgets.ICON_INVITE           = crate_resource("self://resources/icons/invite.svg")
+    mod.widgets.ICON_JOIN_ROOM        = crate_resource("self://resources/icons/join_room.svg")
+    mod.widgets.ICON_JUMP             = crate_resource("self://resources/icons/go_back.svg")
+    mod.widgets.ICON_LOGOUT           = crate_resource("self://resources/icons/logout.svg")
+    mod.widgets.ICON_LINK             = crate_resource("self://resources/icons/link.svg")
+    mod.widgets.ICON_PIN              = crate_resource("self://resources/icons/pin.svg")
+    mod.widgets.ICON_REPLY            = crate_resource("self://resources/icons/reply.svg")
+    mod.widgets.ICON_SEARCH           = crate_resource("self://resources/icons/search.svg")
+    mod.widgets.ICON_SEND             = crate_resource("self://resources/icon_send.svg")
+    mod.widgets.ICON_SETTINGS         = crate_resource("self://resources/icons/settings.svg")
+    mod.widgets.ICON_SQUARES          = crate_resource("self://resources/icons/squares_filled.svg")
+    mod.widgets.ICON_TOMBSTONE        = crate_resource("self://resources/icons/tombstone.svg")
+    mod.widgets.ICON_TRASH            = crate_resource("self://resources/icons/trash.svg")
+    mod.widgets.ICON_UPLOAD           = crate_resource("self://resources/icons/upload.svg")
+    mod.widgets.ICON_VIEW_SOURCE      = crate_resource("self://resources/icons/view_source.svg")
+    mod.widgets.ICON_WARNING          = crate_resource("self://resources/icons/warning.svg")
+    mod.widgets.ICON_ZOOM_IN          = crate_resource("self://resources/icons/zoom_in.svg")
+    mod.widgets.ICON_ZOOM_OUT         = crate_resource("self://resources/icons/zoom_out.svg")
+
+    mod.widgets.TITLE_TEXT = theme.font_regular {
         font_size: (13),
     }
 
-    pub REGULAR_TEXT = <THEME_FONT_REGULAR>{
+    mod.widgets.REGULAR_TEXT = theme.font_regular {
         font_size: (10),
     }
 
-    pub TEXT_SUB = <THEME_FONT_REGULAR>{
+    mod.widgets.TEXT_SUB = theme.font_regular {
         font_size: (10),
     }
 
-    pub USERNAME_FONT_SIZE = 11
-    pub USERNAME_TEXT_COLOR = #x2
-    pub USERNAME_TEXT_STYLE = <THEME_FONT_BOLD>{
-        font_size: (USERNAME_FONT_SIZE),
+    mod.widgets.USERNAME_FONT_SIZE = 11
+
+    mod.widgets.USERNAME_TEXT_COLOR = #x2
+    mod.widgets.USERNAME_TEXT_STYLE = theme.font_bold {
+        font_size: (mod.widgets.USERNAME_FONT_SIZE),
     }
 
-    pub COLOR_ROBRIX_PURPLE = #572DCC; // the purple color from the Robrix logo
-    pub COLOR_ROBRIX_CYAN = #05CDC7; // the cyan color from the Robrix logo
+    mod.widgets.COLOR_ROBRIX_PURPLE = #572DCC; // the purple color from the Robrix logo
+
+    mod.widgets.COLOR_ROBRIX_CYAN = #05CDC7; // the cyan color from the Robrix logo
+
+    mod.widgets.TYPING_NOTICE_TEXT_COLOR = #121570
+
 
-    pub TYPING_NOTICE_TEXT_COLOR = #121570
+    mod.widgets.MESSAGE_FONT_SIZE = 11
 
-    pub MESSAGE_FONT_SIZE = 11
-    pub MESSAGE_TEXT_COLOR = #x333
+    mod.widgets.MESSAGE_TEXT_COLOR = #x333
     // notices (automated messages from bots) use a lighter color
-    pub COLOR_MESSAGE_NOTICE_TEXT = #x888
-    pub MESSAGE_TEXT_LINE_SPACING = 1.3
+    mod.widgets.COLOR_MESSAGE_NOTICE_TEXT = #x888
+    mod.widgets.MESSAGE_TEXT_LINE_SPACING = 1.3
     // This font should only be used for plaintext labels. Don't use this for Html content,
     // as the Html widget sets different fonts for different text styles (e.g., bold, italic).
-    pub MESSAGE_TEXT_STYLE = <THEME_FONT_REGULAR>{
-        font_size: (MESSAGE_FONT_SIZE),
-        line_spacing: (MESSAGE_TEXT_LINE_SPACING),
+    mod.widgets.MESSAGE_TEXT_STYLE = theme.font_regular {
+        font_size: (mod.widgets.MESSAGE_FONT_SIZE),
+        line_spacing: (mod.widgets.MESSAGE_TEXT_LINE_SPACING),
     }
 
-    pub MESSAGE_REPLY_PREVIEW_FONT_SIZE = 9.5
+    mod.widgets.MESSAGE_REPLY_PREVIEW_FONT_SIZE = 9.5
+
+
+
+    mod.widgets.SMALL_STATE_FONT_SIZE = 9.0
 
 
-    pub SMALL_STATE_FONT_SIZE = 9.0
-    pub SMALL_STATE_TEXT_COLOR = #x888
-    pub SMALL_STATE_TEXT_STYLE = <THEME_FONT_REGULAR>{
-        font_size: (SMALL_STATE_FONT_SIZE),
+    mod.widgets.SMALL_STATE_TEXT_COLOR = #x888
+    mod.widgets.SMALL_STATE_TEXT_STYLE = theme.font_regular {
+        font_size: (mod.widgets.SMALL_STATE_FONT_SIZE),
     }
 
-    pub TIMESTAMP_FONT_SIZE = 8.5
-    pub TIMESTAMP_TEXT_COLOR = #x999
-    pub TIMESTAMP_TEXT_STYLE = <THEME_FONT_REGULAR>{
-        font_size: (TIMESTAMP_FONT_SIZE),
+    mod.widgets.TIMESTAMP_FONT_SIZE = 8.5
+
+    mod.widgets.TIMESTAMP_TEXT_COLOR = #x999
+    mod.widgets.TIMESTAMP_TEXT_STYLE = theme.font_regular {
+        font_size: (mod.widgets.TIMESTAMP_FONT_SIZE),
     }
 
-    pub ROOM_NAME_TEXT_COLOR = #x0
-    pub COLOR_META = #xccc
+    mod.widgets.ROOM_NAME_TEXT_COLOR = #x0
 
-    pub COLOR_DIVIDER = #00000018
-    pub COLOR_DIVIDER_DARK = #00000044
+    mod.widgets.COLOR_META = #xccc
 
-    pub COLOR_FG_ACCEPT_GREEN = #138808
-    pub COLOR_BG_ACCEPT_GREEN = #F0FFF0
-    pub COLOR_FG_DANGER_RED = #DC0005
-    pub COLOR_BG_DANGER_RED = #FFF0F0
-    pub COLOR_FG_DISABLED = #B3B3B3
-    pub COLOR_BG_DISABLED = #E0E0E0
-    pub COLOR_WARNING_NOT_FOUND = #953800
+    mod.widgets.COLOR_DIVIDER = #00000018
 
-    pub COLOR_SELECT_TEXT = #A6CDFE
+    mod.widgets.COLOR_DIVIDER_DARK = #00000044
 
-    pub COLOR_PRIMARY = #ffffff
-    pub COLOR_PRIMARY_DARKER = #fefefe
-    pub COLOR_SECONDARY = #E3E3E3
-    pub COLOR_SECONDARY_DARKER = #C8C8C8
+    mod.widgets.COLOR_FG_ACCEPT_GREEN = #138808
 
-    pub COLOR_ACTIVE_PRIMARY = #0f88fe
-    pub COLOR_ACTIVE_PRIMARY_DARKER = #106fcc
+    mod.widgets.COLOR_BG_ACCEPT_GREEN = #F0FFF0
+    mod.widgets.COLOR_FG_DANGER_RED = #DC0005
+    mod.widgets.COLOR_BG_DANGER_RED = #FFF0F0
+    mod.widgets.COLOR_FG_DISABLED = #B3B3B3
+    mod.widgets.COLOR_BG_DISABLED = #E0E0E0
+    mod.widgets.COLOR_WARNING_NOT_FOUND = #953800
 
-    pub COLOR_BG_PREVIEW = #F0F5FF
-    pub COLOR_BG_PREVIEW_HOVER = #CDEDDF
+    mod.widgets.COLOR_SELECT_TEXT = #A6CDFE
 
-    pub COLOR_AVATAR_BG = #52b2ac
-    pub COLOR_AVATAR_BG_IDLE = #d8d8d8
 
+    mod.widgets.COLOR_PRIMARY = #ffffff
 
-    pub COLOR_UNREAD_BADGE_MENTIONS = #FF0000;
-    pub COLOR_UNREAD_BADGE_MARKED   = (COLOR_ROBRIX_CYAN);
-    pub COLOR_UNREAD_BADGE_MESSAGES = #AAAAAA
+    mod.widgets.COLOR_PRIMARY_DARKER = #fefefe
+    mod.widgets.COLOR_SECONDARY = #E3E3E3
+    mod.widgets.COLOR_SECONDARY_DARKER = #C8C8C8
 
+    mod.widgets.COLOR_ACTIVE_PRIMARY = #0f88fe
 
-    pub COLOR_TEXT_IDLE = #d8d8d8
-    pub COLOR_TEXT = #1C274C
-    pub COLOR_TEXT_INPUT_IDLE = #d8d8d8
+    mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER = #106fcc
 
-    pub COLOR_TRANSPARENT = #00000000
-    pub COLOR_WARNING = #fcdb03
+    mod.widgets.COLOR_BG_PREVIEW = #F0F5FF
 
-    pub COLOR_LINK_HOVER = #21B070
+    mod.widgets.COLOR_BG_PREVIEW_HOVER = #CDEDDF
 
+    mod.widgets.COLOR_AVATAR_BG = #52b2ac
 
-    pub NAVIGATION_TAB_BAR_SIZE = 68
-    pub COLOR_NAVIGATION_TAB_FG        = (COLOR_TEXT)
-    pub COLOR_NAVIGATION_TAB_FG_HOVER  = (COLOR_TEXT)
-    pub COLOR_NAVIGATION_TAB_FG_ACTIVE = (COLOR_TEXT)
-    pub COLOR_NAVIGATION_TAB_BG        = (COLOR_SECONDARY)
-    pub COLOR_NAVIGATION_TAB_BG_HOVER  = (COLOR_SECONDARY * 0.85)
-    pub COLOR_NAVIGATION_TAB_BG_ACTIVE = #9
+    mod.widgets.COLOR_AVATAR_BG_IDLE = #d8d8d8
 
-    pub COLOR_IMAGE_VIEWER_BACKGROUND = #333333CC // 80% Opacity
-    pub COLOR_IMAGE_VIEWER_META_BACKGROUND = #E8E8E8
 
-    // An icon that can be rotated at a custom angle.
-    pub IconRotated = <Icon> {
-        draw_icon: {
-            instance rotation_angle: 0.0,
+    mod.widgets.COLOR_UNREAD_BADGE_MENTIONS = #FF0000;
+
+
+    mod.widgets.COLOR_UNREAD_BADGE_MARKED = (mod.widgets.COLOR_ROBRIX_CYAN);
+    mod.widgets.COLOR_UNREAD_BADGE_MESSAGES = #AAAAAA
 
-            // Support rotation of the icon
-            fn clip_and_transform_vertex(self, rect_pos: vec2, rect_size: vec2) -> vec4 {
-                let clipped: vec2 = clamp(
-                    self.geom_pos * rect_size + rect_pos,
-                    self.draw_clip.xy,
-                    self.draw_clip.zw
-                )
-                self.pos = (clipped - rect_pos) / rect_size
-
-                // Calculate the texture coordinates based on the rotation angle
-                let angle_rad = self.rotation_angle * 3.14159265359 / 180.0;
-                let cos_angle = cos(angle_rad);
-                let sin_angle = sin(angle_rad);
-                let rot_matrix = mat2(
-                    cos_angle, -sin_angle,
-                    sin_angle, cos_angle
-                );
-                self.tex_coord1 = mix(
-                    self.icon_t1.xy,
-                    self.icon_t2.xy,
-                    (rot_matrix * (self.pos.xy - vec2(0.5))) + vec2(0.5)
-                );
-
-                return self.camera_projection * (self.camera_view * (self.view_transform * vec4(
-                    clipped.x,
-                    clipped.y,
-                    self.draw_depth + self.draw_zbias,
-                    1.
-                )))
-            }
-        }
-    }
+
+    mod.widgets.COLOR_TEXT_IDLE = #d8d8d8
+
+
+    mod.widgets.COLOR_TEXT = #1C274C
+    mod.widgets.COLOR_TEXT_INPUT_IDLE = #d8d8d8
+
+    mod.widgets.COLOR_TRANSPARENT = #00000000
+
+    mod.widgets.COLOR_WARNING = #fcdb03
+
+    mod.widgets.COLOR_LINK_HOVER = #21B070
+
+
+
+    mod.widgets.NAVIGATION_TAB_BAR_SIZE = 68
+
+
+    mod.widgets.COLOR_NAVIGATION_TAB_FG = (mod.widgets.COLOR_TEXT)
+    mod.widgets.COLOR_NAVIGATION_TAB_FG_HOVER = (mod.widgets.COLOR_TEXT)
+    mod.widgets.COLOR_NAVIGATION_TAB_FG_ACTIVE = (mod.widgets.COLOR_TEXT)
+    mod.widgets.COLOR_NAVIGATION_TAB_BG = (mod.widgets.COLOR_SECONDARY)
+    mod.widgets.COLOR_NAVIGATION_TAB_BG_HOVER = (mod.widgets.COLOR_SECONDARY * 0.85)
+    mod.widgets.COLOR_NAVIGATION_TAB_BG_ACTIVE = #9
+
+    mod.widgets.COLOR_IMAGE_VIEWER_BACKGROUND = #333333CC // 80% Opacity
+
+    mod.widgets.COLOR_IMAGE_VIEWER_META_BACKGROUND = #E8E8E8
 
     // A text input widget styled for Robrix.
-    pub RobrixTextInput = <TextInput> {
+    mod.widgets.RobrixTextInput = TextInput {
         width: Fill, height: Fit,
         margin: 0,
-        align: {y: 0.5}
+        align: Align{y: 0.5}
 
-        draw_bg: {
-            color: (COLOR_PRIMARY)
+        draw_bg +: {
+            color: (mod.widgets.COLOR_PRIMARY)
             border_radius: 2.0
             border_size: 0.0
 
-            color_hover: (COLOR_PRIMARY)
-            color_focus: (COLOR_PRIMARY)
-            color_down: (COLOR_PRIMARY)
-            color_empty: (COLOR_PRIMARY)
-            color_disabled: (COLOR_BG_DISABLED)
+            color_hover: (mod.widgets.COLOR_PRIMARY)
+            color_focus: (mod.widgets.COLOR_PRIMARY)
+            color_down: (mod.widgets.COLOR_PRIMARY)
+            color_empty: (mod.widgets.COLOR_PRIMARY)
+            color_disabled: (mod.widgets.COLOR_BG_DISABLED)
 
-            border_color: (COLOR_PRIMARY)
+            border_color: (mod.widgets.COLOR_PRIMARY)
         }
 
-        draw_selection: {
-            color: (COLOR_SELECT_TEXT)
+        draw_selection +: {
+            color: (mod.widgets.COLOR_SELECT_TEXT)
             // TODO: determine these other colors below
-            color_hover:  (COLOR_SELECT_TEXT)
-            color_focus:  (COLOR_SELECT_TEXT)
-            color_down:  (COLOR_SELECT_TEXT)
-            color_empty:  (COLOR_SELECT_TEXT)
-            color_disabled: (COLOR_SELECT_TEXT)
+            color_hover:  (mod.widgets.COLOR_SELECT_TEXT)
+            color_focus:  (mod.widgets.COLOR_SELECT_TEXT)
+            color_down:  (mod.widgets.COLOR_SELECT_TEXT)
+            color_empty:  (mod.widgets.COLOR_SELECT_TEXT)
+            color_disabled: (mod.widgets.COLOR_SELECT_TEXT)
         }
 
-        draw_cursor: {
-            color: (MESSAGE_TEXT_COLOR)
+        draw_cursor +: {
+            color: (mod.widgets.MESSAGE_TEXT_COLOR)
         }
 
-        draw_text: {
-            text_style: <MESSAGE_TEXT_STYLE>{},
-            color: (MESSAGE_TEXT_COLOR),
+        draw_text +: {
+            text_style: mod.widgets.MESSAGE_TEXT_STYLE {},
+            color: (mod.widgets.MESSAGE_TEXT_COLOR),
             // TODO: determine these colors
-            uniform color_hover: (MESSAGE_TEXT_COLOR),
-            uniform color_focus: (MESSAGE_TEXT_COLOR),
-            uniform color_down: (MESSAGE_TEXT_COLOR),
-            uniform color_disabled: (COLOR_FG_DISABLED),
-            uniform color_empty: #B,
-            uniform color_empty_hover: #B,
-            uniform color_empty_focus: #B,
-
-            fn get_color(self) -> vec4 {
+            color_hover: (mod.widgets.MESSAGE_TEXT_COLOR),
+            color_focus: (mod.widgets.MESSAGE_TEXT_COLOR),
+            color_down: (mod.widgets.MESSAGE_TEXT_COLOR),
+            color_disabled: (mod.widgets.COLOR_FG_DISABLED),
+            color_empty: #B,
+            color_empty_hover: #B,
+            color_empty_focus: #B,
+
+            get_color: fn() -> vec4 {
                 return mix(
                     mix(
                         mix(
@@ -260,38 +247,38 @@ live_design! {
         }
     }
 
-    pub SimpleTextInput = <RobrixTextInput> {
+    mod.widgets.SimpleTextInput = mod.widgets.RobrixTextInput {
+
         padding: 10,
         width: Fill, height: Fit
-        flow: RightWrap,
-        draw_bg: {
-            color: (COLOR_SECONDARY_DARKER)
+        flow: Flow.Right{wrap: true},
+        draw_bg +: {
             border_radius: 2.0
             border_size: 1.0
 
-            color: (COLOR_PRIMARY)
-            color_hover: (COLOR_PRIMARY)
-            color_focus: (COLOR_PRIMARY)
-            color_down: (COLOR_PRIMARY)
-            color_empty: (COLOR_PRIMARY)
-            color_disabled: (COLOR_BG_DISABLED)
-
-            border_color: (COLOR_SECONDARY_DARKER)
-            border_color_hover: (COLOR_ACTIVE_PRIMARY)
-            border_color_focus: (COLOR_ACTIVE_PRIMARY_DARKER)
-            border_color_down: (COLOR_ACTIVE_PRIMARY_DARKER)
-            border_color_empty: (COLOR_SECONDARY_DARKER)
-            border_color_disabled: (COLOR_FG_DISABLED)
-
-            border_color_2: (COLOR_SECONDARY_DARKER)
-            border_color_2_hover: (COLOR_ACTIVE_PRIMARY)
-            border_color_2_focus: (COLOR_ACTIVE_PRIMARY_DARKER)
-            border_color_2_down: (COLOR_ACTIVE_PRIMARY_DARKER)
-            border_color_2_empty: (COLOR_SECONDARY_DARKER)
-            border_color_2_disabled: (COLOR_FG_DISABLED)
+            color: (mod.widgets.COLOR_PRIMARY)
+            color_hover: (mod.widgets.COLOR_PRIMARY)
+            color_focus: (mod.widgets.COLOR_PRIMARY)
+            color_down: (mod.widgets.COLOR_PRIMARY)
+            color_empty: (mod.widgets.COLOR_PRIMARY)
+            color_disabled: (mod.widgets.COLOR_BG_DISABLED)
+
+            border_color: (mod.widgets.COLOR_SECONDARY_DARKER)
+            border_color_hover: (mod.widgets.COLOR_ACTIVE_PRIMARY)
+            border_color_focus: (mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER)
+            border_color_down: (mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER)
+            border_color_empty: (mod.widgets.COLOR_SECONDARY_DARKER)
+            border_color_disabled: (mod.widgets.COLOR_FG_DISABLED)
+
+            border_color_2: (mod.widgets.COLOR_SECONDARY_DARKER)
+            border_color_2_hover: (mod.widgets.COLOR_ACTIVE_PRIMARY)
+            border_color_2_focus: (mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER)
+            border_color_2_down: (mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER)
+            border_color_2_empty: (mod.widgets.COLOR_SECONDARY_DARKER)
+            border_color_2_disabled: (mod.widgets.COLOR_FG_DISABLED)
         }
-        draw_text: {
-            wrap: Word,
+        draw_text +: {
+            flow: Flow.Right{wrap: true},
         }
         empty_text: "Add a display name..."
     }
diff --git a/src/shared/text_or_image.rs b/src/shared/text_or_image.rs
index 808d890a0..4a96be904 100644
--- a/src/shared/text_or_image.rs
+++ b/src/shared/text_or_image.rs
@@ -5,51 +5,51 @@
 
 use makepad_widgets::{image_cache::ImageCacheImpl, *};
 use matrix_sdk::ruma::events::room::MediaSource;
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    DEFAULT_IMAGE = dep("crate://self/resources/img/default_image.png")
+    mod.widgets.DEFAULT_IMAGE = crate_resource("self://resources/img/default_image.png")
+
+
+    mod.widgets.TextOrImage = #(TextOrImage::register_widget(vm)) {
 
-    pub TextOrImage = {{TextOrImage}} {
         width: Fill, height: Fit,
         flow: Overlay,
 
-        text_view = <View> {
+        text_view := SolidView {
             visible: true,
             show_bg: true,
-            draw_bg: {
-                color: #dddddd
+            draw_bg +: {
+                color: instance(#dddddd)
             }
             width: Fill, height: Fit,
-            label = <Label> {
+            label := Label {
                 width: Fill, height: Fit,
-                draw_text: {
-                    wrap: Word,
-                    text_style: <MESSAGE_TEXT_STYLE> { }
+                draw_text +: {
+                    flow: Flow.Right{wrap: true},
+                    text_style: MESSAGE_TEXT_STYLE { }
                     color: (MESSAGE_TEXT_COLOR),
                 }
             }
         }
-        image_view = <View> {
+        image_view := View {
             visible: false,
-            cursor: Default, // Use `Hand` once we support clicking on the image
+            cursor: MouseCursor.Default, // Use `Hand` once we support clicking on the image
             width: Fill, height: Fit,
-            image = <Image> {
+            image := Image {
                 width: Fill, height: Fit,
-                fit: Smallest,
+                fit: ImageFit.Smallest,
             }
         }
-        default_image_view = <View> {
+        default_image_view := View {
             visible: false,
-            cursor: Default, // Use `Hand` once we support clicking on the image
+            cursor: MouseCursor.Default, // Use `Hand` once we support clicking on the image
             width: Fill, height: Fit,
-            image = <Image> {
+            image := Image {
                 width: Fill, height: Fit,
-                fit: Smallest,
-                source: (DEFAULT_IMAGE)
+                fit: ImageFit.Smallest,
+                src: (mod.widgets.DEFAULT_IMAGE)
             }
         }
     }
@@ -61,7 +61,7 @@ live_design! {
 /// This is useful for displaying alternate text when an image is not (yet) available
 /// or fails to load. It can also be used to display a loading message while an image
 /// is being fetched.
-#[derive(Live, Widget, LiveHook)]
+#[derive(Script, Widget, ScriptHook)]
 pub struct TextOrImage {
     #[deref] view: View,
     #[rust] status: TextOrImageStatus,
@@ -73,15 +73,14 @@ impl Widget for TextOrImage {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         // We handle hit events if the status is `Image`.
         if let TextOrImageStatus::Image(mxc_uri) = &self.status {
-            let image_area = self.view.image(ids!(image_view.image)).area();
+            let image_area = self.view.image(cx, ids!(image_view.image)).area();
             match event.hits(cx, image_area) {
                 Hit::FingerDown(_) => {
                     cx.set_key_focus(image_area);
                 }
                 Hit::FingerUp(fe) if fe.is_over && fe.is_primary_hit() && fe.was_tap() => {
                     cx.widget_action(
-                        self.widget_uid(),
-                        &scope.path,
+                        self.widget_uid(), 
                         TextOrImageAction::Clicked(mxc_uri.clone()),
                     );
                     cx.set_cursor(MouseCursor::Default);
@@ -109,10 +108,10 @@ impl TextOrImage {
     /// * `text`: the text that will be displayed in this `TextOrImage`, e.g.,
     ///   a message like "Loading..." or an error message.
     pub fn show_text<T: AsRef<str>>(&mut self, cx: &mut Cx, text: T) {
-        self.view(ids!(image_view)).set_visible(cx, false);
-        self.view(ids!(default_image_view)).set_visible(cx, false);
-        self.view(ids!(text_view)).set_visible(cx, true);
-        self.view.label(ids!(text_view.label)).set_text(cx, text.as_ref());
+        self.view(cx, ids!(image_view)).set_visible(cx, false);
+        self.view(cx, ids!(default_image_view)).set_visible(cx, false);
+        self.view(cx, ids!(text_view)).set_visible(cx, true);
+        self.view.label(cx, ids!(text_view.label)).set_text(cx, text.as_ref());
         self.status = TextOrImageStatus::Text;
     }
 
@@ -128,14 +127,14 @@ impl TextOrImage {
     pub fn show_image<F, E>(&mut self, cx: &mut Cx, source_url: Option<MediaSource>, image_set_function: F) -> Result<(), E>
         where F: FnOnce(&mut Cx, ImageRef) -> Result<(usize, usize), E>
     {
-        let image_ref = self.view.image(ids!(image_view.image));
+        let image_ref = self.view.image(cx, ids!(image_view.image));
         match image_set_function(cx, image_ref) {
             Ok(size_in_pixels) => {
                 self.status = TextOrImageStatus::Image(source_url);
                 self.size_in_pixels = size_in_pixels;
-                self.view(ids!(image_view)).set_visible(cx, true);
-                self.view(ids!(text_view)).set_visible(cx, false);
-                self.view(ids!(default_image_view)).set_visible(cx, false);
+                self.view(cx, ids!(image_view)).set_visible(cx, true);
+                self.view(cx, ids!(text_view)).set_visible(cx, false);
+                self.view(cx, ids!(default_image_view)).set_visible(cx, false);
                 Ok(())
             }
             Err(e) => {
@@ -152,9 +151,9 @@ impl TextOrImage {
 
     /// Displays the default image that is used when no image is available.
     pub fn show_default_image(&self, cx: &mut Cx) {
-        self.view(ids!(default_image_view)).set_visible(cx, true);
-        self.view(ids!(text_view)).set_visible(cx, false);
-        self.view(ids!(image_view)).set_visible(cx, false);
+        self.view(cx, ids!(default_image_view)).set_visible(cx, true);
+        self.view(cx, ids!(text_view)).set_visible(cx, false);
+        self.view(cx, ids!(image_view)).set_visible(cx, false);
     }
 }
 
@@ -198,11 +197,11 @@ impl TextOrImageRef {
     /// If the `TextOrImage` is not displaying an image, this function returns `None`.
     ///
     /// Note that this function will return `None` if the `TextOrImage` widget is not yet laid out.
-    pub fn get_texture(&self, _cx: &mut Cx) -> Option<Texture> {
+    pub fn get_texture(&self, cx: &mut Cx) -> Option<Texture> {
         self.borrow().and_then(|inner| {
             inner
                 .view
-                .image(ids!(image_view.image))
+                .image(cx, ids!(image_view.image))
                 .borrow()
                 .and_then(|image_inner| image_inner.get_texture(0).clone())
         })
@@ -219,9 +218,10 @@ pub enum TextOrImageStatus {
 }
 
 /// Actions emitted by the `TextOrImage` based on user interaction with it.
-#[derive(Debug, Clone, DefaultNone)]
+#[derive(Debug, Clone, Default)]
 pub enum TextOrImageAction {
     /// The user has clicked the `TextOrImage`, with source URL stored in this variant.
     Clicked(Option<MediaSource>),
+    #[default]
     None
 }
diff --git a/src/shared/timestamp.rs b/src/shared/timestamp.rs
index 6f8863573..c84935fd3 100644
--- a/src/shared/timestamp.rs
+++ b/src/shared/timestamp.rs
@@ -4,27 +4,24 @@
 use chrono::{DateTime, Local};
 use makepad_widgets::*;
 
-use crate::shared::callout_tooltip::{CalloutTooltipOptions, TooltipPosition};
 
-use super::callout_tooltip::TooltipAction;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
 
-    use crate::shared::styles::*;
+    mod.widgets.Timestamp = #(Timestamp::register_widget(vm)) {
+
 
-    pub Timestamp = {{Timestamp}} {
         width: Fit, height: Fit
         flow: Right,
 
-        ts_label = <Label> {
+        ts_label := Label {
             width: Fit, height: Fit
             flow: Right, // do not wrap
             padding: 0,
-            draw_text: {
-                text_style: <TIMESTAMP_TEXT_STYLE> {},
+            draw_text +: {
+                text_style: TIMESTAMP_TEXT_STYLE {},
                 color: (TIMESTAMP_TEXT_COLOR)
             }
         }
@@ -34,7 +31,7 @@ live_design! {
 /// A text input (with a search icon and cancel button) used to filter the rooms list.
 ///
 /// See the module-level docs for more detail.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct Timestamp {
     #[deref] view: View,
 
@@ -51,7 +48,7 @@ impl Widget for Timestamp {
             | Hit::FingerHoverIn(..) => true,
             Hit::FingerUp(fue) if fue.is_over && fue.is_primary_hit() => true,
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
                 false
             }
             _ => false,
@@ -60,8 +57,7 @@ impl Widget for Timestamp {
             // TODO: use pure_rust_locales crate to format the time based on the chosen Locale.
             let locale_extended_fmt_en_us= "%a %b %-d, %Y, %r";
             cx.widget_action(
-                self.widget_uid(),
-                &scope.path,
+                self.widget_uid(), 
                 TooltipAction::HoverIn {
                     text: self.dt.format(locale_extended_fmt_en_us).to_string(),
                     widget_rect: area.rect(cx),
@@ -83,7 +79,7 @@ impl Timestamp {
     pub fn set_date_time(&mut self, cx: &mut Cx, dt: DateTime<Local>) {
         // TODO: use pure_rust_locales crate to format the time based on the chosen Locale.
         let locale_fmt_en_us = "%-I:%M %P";
-        self.label(ids!(ts_label)).set_text(
+        self.label(cx, ids!(ts_label)).set_text(
             cx,
             &dt.format(locale_fmt_en_us).to_string()
         );
diff --git a/src/shared/unread_badge.rs b/src/shared/unread_badge.rs
index 5e32ae21a..155d1cd2a 100644
--- a/src/shared/unread_badge.rs
+++ b/src/shared/unread_badge.rs
@@ -3,30 +3,28 @@
 
 use makepad_widgets::*;
 
-use crate::shared::styles::*;
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
-    use link::shaders::*;
-    use crate::shared::styles::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.UnreadBadge = #(UnreadBadge::register_widget(vm)) {
 
-    pub UnreadBadge = {{UnreadBadge}} {
         width: 30, height: 20,
-        align: { x: 0.5, y: 0.5 }
+        align: Align{ x: 0.5, y: 0.5 }
         flow: Overlay,
 
-        rounded_view = <View> {
+        rounded_view := SolidView {
             width: Fill,
             height: Fill,
             show_bg: true,
-            draw_bg: {
-                instance badge_color: (COLOR_UNREAD_BADGE_MESSAGES),
-                instance border_radius: 4.0
+            draw_bg +: {
+                badge_color: instance((COLOR_UNREAD_BADGE_MESSAGES)),
+                border_radius: instance(4.0)
                 // Adjust this border_size to larger value to make oval smaller 
-                instance border_size: 2.0
-                fn pixel(self) -> vec4 {
-                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                border_size: instance(2.0)
+                pixel: fn() {
+                    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                     sdf.box(
                         self.border_size,
                         1.0,
@@ -40,23 +38,24 @@ live_design! {
             }
         }
         // Label that displays the unread message count
-        label_count = <Label> {
+        label_count := Label {
             padding: 0,
             width: Fit,
             height: Fit,
             flow: Right, // do not wrap
             text: "",
-            draw_text: {
+            draw_text +: {
                 color: #ffffff,
-                text_style: {font_size: 8.0},
+                text_style: theme.font_regular {font_size: 8.0},
             }
         }
     }
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct UnreadBadge {
+    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[live] is_marked_unread: bool,
     #[live] unread_mentions: u64,
@@ -88,23 +87,25 @@ impl Widget for UnreadBadge {
         // If there are unread mentions, show red badge and the number of unread mentions
         if self.unread_mentions > 0 {
             let (border_size, plus_sign) = format_border_and_truncation(self.unread_mentions);
-            self.label(ids!(label_count))
+            self.label(cx, ids!(label_count))
                 .set_text(cx, &format!("{}{plus_sign}", std::cmp::min(self.unread_mentions, 99)));
-            self.view(ids!(rounded_view)).apply_over(cx, live!{
-                draw_bg: {
-                    border_size: (border_size),
-                    badge_color: (COLOR_UNREAD_BADGE_MENTIONS)
+            let mut rounded_view = self.view(cx, ids!(rounded_view));
+            script_apply_eval!(cx, rounded_view, {
+                draw_bg +: {
+                    border_size: #(border_size),
+                    badge_color: mod.widgets.COLOR_UNREAD_BADGE_MENTIONS
                 }
             });
             self.visible = true;
         }
         // If there are no unread mentions but this is marked as unread, show the badge as a dot.
         else if self.is_marked_unread {
-            self.label(ids!(label_count)).set_text(cx, "");
-            self.view(ids!(rounded_view)).apply_over(cx, live!{
-                draw_bg: {
+            self.label(cx, ids!(label_count)).set_text(cx, "");
+            let mut rounded_view = self.view(cx, ids!(rounded_view));
+            script_apply_eval!(cx, rounded_view, {
+                draw_bg +: {
                     border_size: 6.0, // larger value = smaller dot
-                    badge_color: (COLOR_UNREAD_BADGE_MARKED)
+                    badge_color: mod.widgets.COLOR_UNREAD_BADGE_MARKED
                 }
             });
             self.visible = true;
@@ -112,12 +113,13 @@ impl Widget for UnreadBadge {
         // If there are no unread mentions but there are unread messages, show gray badge and the number of unread messages
         else if self.unread_messages > 0 {
             let (border_size, plus_sign) = format_border_and_truncation(self.unread_messages);
-            self.label(ids!(label_count))
+            self.label(cx, ids!(label_count))
                 .set_text(cx, &format!("{}{plus_sign}", std::cmp::min(self.unread_messages, 99)));
-            self.view(ids!(rounded_view)).apply_over(cx, live!{
-                draw_bg: {
-                    border_size: (border_size),
-                    badge_color: (COLOR_UNREAD_BADGE_MESSAGES)
+            let mut rounded_view = self.view(cx, ids!(rounded_view));
+            script_apply_eval!(cx, rounded_view, {
+                draw_bg +: {
+                    border_size: #(border_size),
+                    badge_color: mod.widgets.COLOR_UNREAD_BADGE_MESSAGES
                 }
             });
             self.visible = true;
diff --git a/src/shared/verification_badge.rs b/src/shared/verification_badge.rs
index 3039efe91..00e062ec7 100644
--- a/src/shared/verification_badge.rs
+++ b/src/shared/verification_badge.rs
@@ -9,79 +9,82 @@ use crate::{
 
 
 // First, define the verification icons component layout
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
-    use crate::shared::styles::*;
-    use crate::shared::my_tooltip::*;
-
-    VERIFICATION_YES = dep("crate://self/resources/icons/verification_yes.svg")
-    VERIFICATION_NO = dep("crate://self/resources/icons/verification_no.svg")
-    VERIFICATION_UNK = dep("crate://self/resources/icons/verification_unk.svg")
-
-    VerificationIcon = <Icon> {
-        icon_walk: { width: 19, margin: 0}
-        margin: {left: 0, right: 3, top: 2, bottom: 0}
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.VERIFICATION_YES = crate_resource("self://resources/icons/verification_yes.svg")
+
+    mod.widgets.VERIFICATION_NO = crate_resource("self://resources/icons/verification_no.svg")
+    mod.widgets.VERIFICATION_UNK = crate_resource("self://resources/icons/verification_unk.svg")
+
+    mod.widgets.VerificationIcon = Icon {
+
+        icon_walk: Walk{ width: 19, margin: 0}
+        margin: Inset{left: 0, right: 3, top: 2, bottom: 0}
     }
 
-    pub IconYes = <View> {
+    mod.widgets.IconYes = View {
+
         visible: false
         width: Fit, height: Fit
-        <VerificationIcon> {
-            draw_icon: {
-                svg_file: (VERIFICATION_YES),
-                fn get_color(self) -> vec4 {
+        mod.widgets.VerificationIcon {
+            draw_icon +: {
+                svg: (mod.widgets.VERIFICATION_YES),
+                get_color: fn() -> vec4 {
                     return (COLOR_FG_ACCEPT_GREEN);
                 }
             }
         }
     }
 
-    pub IconNo = <View> {
+    mod.widgets.IconNo = View {
+
         visible: false
         width: Fit, height: Fit
-        <VerificationIcon> {
-            draw_icon: {
-                svg_file: (VERIFICATION_NO),
-                fn get_color(self) -> vec4 {
+        mod.widgets.VerificationIcon {
+            draw_icon +: {
+                svg: (mod.widgets.VERIFICATION_NO),
+                get_color: fn() -> vec4 {
                     return (COLOR_FG_DANGER_RED);
                 }
             }
         }
     }
 
-    pub IconUnk = <View> {
+    mod.widgets.IconUnk = View {
+
         visible: false
         width: Fit, height: Fit
-        <VerificationIcon> {
-            draw_icon: {
-                svg_file: (VERIFICATION_UNK),
-                fn get_color(self) -> vec4 {
+        mod.widgets.VerificationIcon {
+            draw_icon +: {
+                svg: (mod.widgets.VERIFICATION_UNK),
+                get_color: fn() -> vec4 {
                     return #x888888;
                 }
             }
         }
     }
 
-    pub VerificationBadge = {{VerificationBadge}} {
+    mod.widgets.VerificationBadge = #(VerificationBadge::register_widget(vm)) {
+
         width: Fit, height: Fit
         flow: Overlay
-        align: { x: 1.0, y: 0 }
+        align: Align{ x: 1.0, y: 0 }
 
-        verification_icons = <View> {
+        verification_icons := View {
             flow: Overlay
-            align: { x: 1.0, y: 0 }
+            align: Align{ x: 1.0, y: 0 }
             width: Fit, height: Fit
 
-            icon_yes = <IconYes> {}
-            icon_no = <IconNo> {}
-            icon_unk = <IconUnk> {}
+            icon_yes := mod.widgets.IconYes {}
+            icon_no := mod.widgets.IconNo {}
+            icon_unk := mod.widgets.IconUnk {}
         }
     }
 }
 
-#[derive(Live, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct VerificationBadge {
     #[deref]
     view: View,
@@ -89,17 +92,15 @@ pub struct VerificationBadge {
     verification_state: VerificationState,
 }
 
-impl LiveHook for VerificationBadge {
-    fn after_apply_from_doc(&mut self, cx: &mut Cx) {
-        if let Some(client) = get_client() {
-            self.verification_state = client.encryption().verification_state().get();
-            self.update_icon_visibility(cx);
-        }
-    }
-}
-
 impl Widget for VerificationBadge {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if self.verification_state == VerificationState::Unknown {
+            if let Some(client) = get_client() {
+                self.verification_state = client.encryption().verification_state().get();
+                self.update_icon_visibility(cx);
+            }
+        }
+
         self.view.handle_event(cx, event, scope);
 
         if let Event::Actions(actions) = event {
@@ -125,9 +126,9 @@ impl VerificationBadge {
             VerificationState::Verified => (true, false, false),
         };
 
-        self.view(ids!(icon_yes)).set_visible(cx, yes);
-        self.view(ids!(icon_no)).set_visible(cx, no);
-        self.view(ids!(icon_unk)).set_visible(cx, unk);
+        self.view(cx, ids!(icon_yes)).set_visible(cx, yes);
+        self.view(cx, ids!(icon_no)).set_visible(cx, no);
+        self.view(cx, ids!(icon_unk)).set_visible(cx, unk);
         self.redraw(cx);
     }
 }
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 0674517e6..8a773667b 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -702,7 +702,7 @@ async fn matrix_worker_task(
             }
 
             MatrixRequest::Logout { is_desktop } => {
-                log!("Received MatrixRequest::Logout, is_desktop={}", is_desktop);
+                log!("Received MatrixRequest::Logout, is_desktop: {}", is_desktop);
                 let _logout_task = Handle::current().spawn(async move {
                     log!("Starting logout task");
                     // Use the state machine implementation
@@ -1902,7 +1902,7 @@ async fn matrix_worker_task(
 
                     // match &result {
                     //     Ok(preview_data) => {
-                    //         log!("Successfully fetched URL preview for {}: title={:?}, site_name={:?}", 
+                    //         log!("Successfully fetched URL preview for {}: title: {:?}, site_name: {:?}", 
                     //              url, preview_data.title, preview_data.site_name);
                     //     }
                     //     Err(e) => {
diff --git a/src/tsp/create_did_modal.rs b/src/tsp/create_did_modal.rs
index 465fed957..5b2863a3f 100644
--- a/src/tsp/create_did_modal.rs
+++ b/src/tsp/create_did_modal.rs
@@ -1,250 +1,248 @@
 //! A modal dialog for creating a new TSP Decentralized Identity (DID).
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 
 use crate::{shared::styles::*, tsp};
 
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub CreateDidModal = {{CreateDidModal}} {
+    mod.widgets.CreateDidModal = #(CreateDidModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        <RoundedView> {
+        RoundedView {
             width: 400
             height: Fit
-            align: {x: 0.5}
+            align: Align{x: 0.5}
             flow: Down
-            padding: {top: 30, right: 25, bottom: 20, left: 25}
+            padding: Inset{top: 30, right: 25, bottom: 20, left: 25}
 
             show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_PRIMARY))
                 border_radius: 4.0
             }
 
-            title_view = <View> {
+            title_view := View {
                 width: Fill,
                 height: Fit,
-                padding: {top: 0, bottom: 25}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 25}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                title := Label {
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                     text: "Create New Identity (DID)"
                 }
             }
 
-            <RoundedView> {
+            RoundedView {
                 width: 350,
                 height: Fit,
                 spacing: 15,
                 padding: 15,
-                align: {x: 0.5}
+                align: Align{x: 0.5}
                 flow: Down,
 
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                     border_radius: 4.0
                 }
 
-                username_input = <RobrixTextInput> {
+                username_input := RobrixTextInput {
                     width: Fill,
                     height: Fit,
                     padding: 10,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 12},
                         color: #000
                     }
                     empty_text: "Identity Username",
                 }
 
-                alias_input = <RobrixTextInput> {
+                alias_input := RobrixTextInput {
                     width: Fill,
                     height: Fit,
                     padding: 10,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 12},
                         color: #000
                     }
                     empty_text: "Enter an alias (optional)",
                 }
 
-                did_type_radio_buttons = <View> {
+                did_type_radio_buttons := View {
                     spacing: 20,
                     width: Fit, height: Fit,
-                    did_web   = <RadioButtonFlat> {
+                    did_web := RadioButtonFlat {
                         text: "Web"
-                        animator: { active = { default: on } }
+                        animator: { active: { default: on } }
                     }
-                    did_webvh = <RadioButtonFlat> {
+                    did_webvh := RadioButtonFlat {
                         text: "WebVH"
-                        animator: { disabled = { default: on } }
+                        animator: { disabled: { default: on } }
                     }
-                    did_peer  = <RadioButtonFlat> {
+                    did_peer := RadioButtonFlat {
                         text: "Peer",
-                        animator: { disabled = { default: on } }
+                        animator: { disabled: { default: on } }
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Down
 
-                    server_input = <RobrixTextInput> {
+                    server_input := RobrixTextInput {
                         width: Fill, height: Fit,
                         flow: Right, // do not wrap
-                        padding: {top: 3, bottom: 3}
+                        padding: Inset{top: 3, bottom: 3}
                         empty_text: "p.teaspoon.world",
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{font_size: 10.0}
+                        draw_text +: {
+                            text_style: REGULAR_TEXT {font_size: 10.0}
                         }
                     }
 
-                    <View> {
+                    View {
                         width: Fill,
                         height: Fit,
                         flow: Right,
-                        padding: {top: 5, left: 2, right: 2, bottom: 2}
+                        padding: Inset{top: 5, left: 2, right: 2, bottom: 2}
                         spacing: 0.0,
-                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
 
-                        left_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        left_line := LineH {
+                            draw_bg +: { color: instance(#C8C8C8)}
                         }
 
-                        <Label> {
+                        Label {
                             width: Fit, height: Fit
                             padding:  0
-                            draw_text: {
+                            draw_text +: {
                                 color: #777777
-                                text_style: <REGULAR_TEXT>{font_size: 9}
+                                text_style: REGULAR_TEXT {font_size: 9}
                             }
                             text: "Intermediary server domain"
                         }
 
-                        right_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        right_line := LineH {
+                            draw_bg +: { color: instance(#C8C8C8)}
                         }
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Down
 
-                    did_server_input = <RobrixTextInput> {
+                    did_server_input := RobrixTextInput {
                         width: Fill, height: Fit,
                         flow: Right, // do not wrap
-                        padding: {top: 3, bottom: 3}
+                        padding: Inset{top: 3, bottom: 3}
                         empty_text: "did.teaspoon.world",
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{font_size: 10.0}
+                        draw_text +: {
+                            text_style: REGULAR_TEXT {font_size: 10.0}
                         }
                     }
 
-                    <View> {
+                    View {
                         width: Fill,
                         height: Fit,
                         flow: Right,
-                        padding: {top: 5, left: 2, right: 2, bottom: 2}
+                        padding: Inset{top: 5, left: 2, right: 2, bottom: 2}
                         spacing: 0.0,
-                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
 
-                        left_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        left_line := LineH {
+                            draw_bg +: { color: instance(#C8C8C8)}
                         }
 
-                        <Label> {
+                        Label {
                             width: Fit, height: Fit
                             padding: 0
-                            draw_text: {
+                            draw_text +: {
                                 color: #777777
-                                text_style: <REGULAR_TEXT>{font_size: 9}
+                                text_style: REGULAR_TEXT {font_size: 9}
                             }
                             text: "DID server domain"
                         }
 
-                        right_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        right_line := LineH {
+                            draw_bg +: { color: instance(#C8C8C8)}
                         }
                     }
                 }
             }
 
-            <View> {
+            View {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: {top: 20, bottom: 20}
-                align: {x: 1.0, y: 0.5}
+                padding: Inset{top: 20, bottom: 20}
+                align: Align{x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button = <RobrixIconButton> {
+                cancel_button := RobrixIconButton {
                     width: 100,
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon: {
-                        svg_file: (ICON_FORBIDDEN)
+                    draw_icon +: {
+                        svg: (ICON_FORBIDDEN)
                         color: (COLOR_FG_DANGER_RED),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
     
-                    draw_bg: {
-                        border_color: (COLOR_FG_DANGER_RED),
-                        color: (COLOR_BG_DANGER_RED)
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_DANGER_RED)),
+                        color: instance((COLOR_BG_DANGER_RED))
                     }
                     text: "Cancel"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_DANGER_RED),
                     }
                 }
 
-                accept_button = <RobrixIconButton> {
+                accept_button := RobrixIconButton {
                     width: 140
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon: {
-                        svg_file: (ICON_CHECKMARK)
+                    draw_icon +: {
+                        svg: (ICON_CHECKMARK)
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: (COLOR_BG_ACCEPT_GREEN)
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                        color: instance((COLOR_BG_ACCEPT_GREEN))
                     }
                     text: "Create DID"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
                 }
             }
 
-            status_label = <Label> {
+            status_label := Label {
                 width: Fill,
                 height: Fit,
                 padding: 0,
                 margin: 0,
-                flow: RightWrap,
-                align: {x: 0.5, y: 0.0}
-                draw_text: {
-                    wrap: Word
-                    text_style: <REGULAR_TEXT>{font_size: 11},
+                flow: Flow.Right{wrap: true},
+                align: Align{x: 0.5, y: 0.0}
+                draw_text +: {
+                    flow: Flow.Right{wrap: true}
+                    text_style: REGULAR_TEXT {font_size: 11},
                     color: #000
                 }
                 text: "status label"
@@ -277,7 +275,7 @@ enum CreateDidModalState {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct CreateDidModal {
     #[deref] view: View,
     #[rust] state: CreateDidModalState,
@@ -297,8 +295,8 @@ impl Widget for CreateDidModal {
 
 impl WidgetMatchEvent for CreateDidModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let accept_button = self.view.button(ids!(accept_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
+        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -317,11 +315,11 @@ impl WidgetMatchEvent for CreateDidModal {
             return;
         }
 
-        let username_input = self.view.text_input(ids!(username_input));
-        let alias_input = self.view.text_input(ids!(alias_input));
-        let server_input = self.view.text_input(ids!(server_input));
-        let did_server_input = self.view.text_input(ids!(did_server_input));
-        let status_label = self.view.label(ids!(status_label));
+        let username_input = self.view.text_input(cx, ids!(username_input));
+        let alias_input = self.view.text_input(cx, ids!(alias_input));
+        let server_input = self.view.text_input(cx, ids!(server_input));
+        let did_server_input = self.view.text_input(cx, ids!(did_server_input));
+        let status_label = self.view.label(cx, ids!(status_label));
 
         // Handle clicking the accept button.
         let mut needs_redraw = false;
@@ -401,7 +399,7 @@ impl WidgetMatchEvent for CreateDidModal {
                 || did_server_input.changed(actions).is_some()
             {
                 self.is_showing_error = false;
-                self.view.label(ids!(status_label)).set_text(cx, "");
+                self.view.label(cx, ids!(status_label)).set_text(cx, "");
                 self.state = CreateDidModalState::WaitingForUserInput;
                 accept_button.apply_over(cx, live!(
                     text: "Create DID",
@@ -430,7 +428,7 @@ impl WidgetMatchEvent for CreateDidModal {
                         enabled: true,
                         text: "Okay",
                         draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY),
+                            color: instance((COLOR_ACTIVE_PRIMARY)),
                         },
                         draw_icon: {
                             color: (COLOR_PRIMARY),
@@ -477,8 +475,8 @@ impl WidgetMatchEvent for CreateDidModal {
 impl CreateDidModal {
     pub fn show(&mut self, cx: &mut Cx) {
         self.state = CreateDidModalState::WaitingForUserInput;
-        let accept_button = self.view.button(ids!(accept_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
+        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
         accept_button.set_text(cx, "Create DID");
         cancel_button.set_text(cx, "Cancel");
         accept_button.reset_hover(cx);
@@ -488,11 +486,11 @@ impl CreateDidModal {
         accept_button.set_visible(cx, true);
         cancel_button.set_visible(cx, true);
         // TODO: return buttons to their default state/appearance
-        self.view.text_input(ids!(username_input)).set_is_read_only(cx, false);
-        self.view.text_input(ids!(alias_input)).set_is_read_only(cx, false);
-        self.view.text_input(ids!(server_input)).set_is_read_only(cx, false);
-        self.view.text_input(ids!(did_server_input)).set_is_read_only(cx, false);
-        self.view.label(ids!(status_label)).set_text(cx, "");
+        self.view.text_input(cx, ids!(username_input)).set_is_read_only(cx, false);
+        self.view.text_input(cx, ids!(alias_input)).set_is_read_only(cx, false);
+        self.view.text_input(cx, ids!(server_input)).set_is_read_only(cx, false);
+        self.view.text_input(cx, ids!(did_server_input)).set_is_read_only(cx, false);
+        self.view.label(cx, ids!(status_label)).set_text(cx, "");
         self.is_showing_error = false;
         self.view.redraw(cx);        
     }
diff --git a/src/tsp/create_wallet_modal.rs b/src/tsp/create_wallet_modal.rs
index 2b10b9efd..fc39a06e2 100644
--- a/src/tsp/create_wallet_modal.rs
+++ b/src/tsp/create_wallet_modal.rs
@@ -1,202 +1,200 @@
 //! A modal dialog for creating a new TSP wallet.
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 
 use crate::{shared::styles::*, tsp::{self, TspWalletMetadata}};
 
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub CreateWalletModal = {{CreateWalletModal}} {
+    mod.widgets.CreateWalletModal = #(CreateWalletModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        <RoundedView> {
+        RoundedView {
             width: 400
             height: Fit
-            align: {x: 0.5}
+            align: Align{x: 0.5}
             flow: Down
-            padding: {top: 30, right: 25, bottom: 20, left: 25}
+            padding: Inset{top: 30, right: 25, bottom: 20, left: 25}
 
             show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY)
+            draw_bg +: {
+                color: instance((COLOR_PRIMARY))
                 border_radius: 4
             }
 
-            title_view = <View> {
+            title_view := View {
                 width: Fill,
                 height: Fit,
-                padding: {top: 0, bottom: 25}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 25}
+                align: Align{x: 0.5, y: 0.0}
 
-                title = <Label> {
-                    flow: RightWrap,
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                title := Label {
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                     text: "Create New TSP Wallet"
                 }
             }
 
-            <RoundedView> {
+            RoundedView {
                 width: 350,
                 height: Fit,
                 spacing: 15,
                 padding: 15,
-                align: {x: 0.5}
+                align: Align{x: 0.5}
                 flow: Down,
 
                 show_bg: true
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                     border_radius: 4.0
                 }
 
-                wallet_name_input = <RobrixTextInput> {
+                wallet_name_input := RobrixTextInput {
                     width: Fill,
                     height: Fit,
                     padding: 10,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 12},
                         color: #000
                     }
                     empty_text: "Wallet Name",
                 }
 
-                password_input = <RobrixTextInput> {
+                password_input := RobrixTextInput {
                     width: Fill,
                     height: Fit,
                     padding: 10,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 12},
                         color: #000
                     }
                     is_password: true,
                     empty_text: "Wallet Password",
                 }
 
-                confirm_password_input = <RobrixTextInput> {
+                confirm_password_input := RobrixTextInput {
                     width: Fill,
                     height: Fit,
                     padding: 10,
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {font_size: 12},
                         color: #000
                     }
                     is_password: true,
                     empty_text: "Confirm Wallet Password",
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Down
 
-                    wallet_file_name_input = <RobrixTextInput> {
+                    wallet_file_name_input := RobrixTextInput {
                         width: Fill, height: Fit,
                         flow: Right, // do not wrap
-                        padding: {top: 3, bottom: 3}
+                        padding: Inset{top: 3, bottom: 3}
                         empty_text: "my_wallet_file",
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{font_size: 10.0}
+                        draw_text +: {
+                            text_style: REGULAR_TEXT {font_size: 10.0}
                         }
                     }
 
-                    <View> {
+                    View {
                         width: Fill,
                         height: Fit,
                         flow: Right,
-                        padding: {top: 5, left: 2, right: 2, bottom: 2}
+                        padding: Inset{top: 5, left: 2, right: 2, bottom: 2}
                         spacing: 0.0,
-                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
 
-                        left_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        left_line := LineH {
+                            draw_bg +: { color: instance(#C8C8C8)}
                         }
 
-                        <Label> {
+                        Label {
                             width: Fit, height: Fit
                             padding: 0
-                            draw_text: {
+                            draw_text +: {
                                 color: #777777
-                                text_style: <REGULAR_TEXT>{font_size: 9}
+                                text_style: REGULAR_TEXT {font_size: 9}
                             }
                             text: "Wallet File Name (optional)"
                         }
 
-                        right_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        right_line := LineH {
+                            draw_bg +: { color: instance(#C8C8C8)}
                         }
                     }
                 }
             }
 
-            <View> {
+            View {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: {top: 20, bottom: 20}
-                align: {x: 1.0, y: 0.5}
+                padding: Inset{top: 20, bottom: 20}
+                align: Align{x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button = <RobrixIconButton> {
+                cancel_button := RobrixIconButton {
                     width: 100,
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon: {
-                        svg_file: (ICON_FORBIDDEN)
+                    draw_icon +: {
+                        svg: (ICON_FORBIDDEN)
                         color: (COLOR_FG_DANGER_RED),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
     
-                    draw_bg: {
-                        border_color: (COLOR_FG_DANGER_RED),
-                        color: (COLOR_BG_DANGER_RED)
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_DANGER_RED)),
+                        color: instance((COLOR_BG_DANGER_RED))
                     }
                     text: "Cancel"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_DANGER_RED),
                     }
                 }
 
-                accept_button = <RobrixIconButton> {
+                accept_button := RobrixIconButton {
                     width: 140
-                    align: {x: 0.5, y: 0.5}
+                    align: Align{x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon: {
-                        svg_file: (ICON_CHECKMARK)
+                    draw_icon +: {
+                        svg: (ICON_CHECKMARK)
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
 
-                    draw_bg: {
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: (COLOR_BG_ACCEPT_GREEN)
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                        color: instance((COLOR_BG_ACCEPT_GREEN))
                     }
                     text: "Create Wallet"
-                    draw_text:{
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
                 }
             }
 
-            status_label = <Label> {
+            status_label := Label {
                 width: Fill,
                 height: Fit,
-                flow: RightWrap,
-                align: {x: 0.5, y: 0.0}
-                draw_text: {
-                    wrap: Word
-                    text_style: <REGULAR_TEXT>{font_size: 11},
+                flow: Flow.Right{wrap: true},
+                align: Align{x: 0.5, y: 0.0}
+                draw_text +: {
+                    flow: Flow.Right{wrap: true}
+                    text_style: REGULAR_TEXT {font_size: 11},
                     color: #000
                 }
                 text: "status label"
@@ -229,7 +227,7 @@ enum CreateWalletModalState {
 }
 
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct CreateWalletModal {
     #[deref] view: View,
     #[rust] state: CreateWalletModalState,
@@ -249,8 +247,8 @@ impl Widget for CreateWalletModal {
 
 impl WidgetMatchEvent for CreateWalletModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let accept_button = self.view.button(ids!(accept_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
+        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -269,11 +267,11 @@ impl WidgetMatchEvent for CreateWalletModal {
             return;
         }
 
-        let wallet_name_input = self.view.text_input(ids!(wallet_name_input));
-        let wallet_file_name_input = self.view.text_input(ids!(wallet_file_name_input));
-        let password_input = self.view.text_input(ids!(password_input));
-        let confirm_password_input = self.view.text_input(ids!(confirm_password_input));
-        let status_label = self.view.label(ids!(status_label));
+        let wallet_name_input = self.view.text_input(cx, ids!(wallet_name_input));
+        let wallet_file_name_input = self.view.text_input(cx, ids!(wallet_file_name_input));
+        let password_input = self.view.text_input(cx, ids!(password_input));
+        let confirm_password_input = self.view.text_input(cx, ids!(confirm_password_input));
+        let status_label = self.view.label(cx, ids!(status_label));
 
         // Handle clicking the accept button.
         let mut needs_redraw = false;
@@ -362,7 +360,7 @@ impl WidgetMatchEvent for CreateWalletModal {
                 || confirm_password_input.changed(actions).is_some()
             {
                 self.is_showing_error = false;
-                self.view.label(ids!(status_label)).set_text(cx, "");
+                self.view.label(cx, ids!(status_label)).set_text(cx, "");
                 self.state = CreateWalletModalState::WaitingForUserInput;
                 accept_button.apply_over(cx, live!(
                     text: "Create Wallet",
@@ -402,7 +400,7 @@ impl WidgetMatchEvent for CreateWalletModal {
                         enabled: true,
                         text: "Okay",
                         draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY),
+                            color: instance((COLOR_ACTIVE_PRIMARY)),
                         },
                         draw_icon: {
                             color: (COLOR_PRIMARY),
@@ -446,8 +444,8 @@ impl WidgetMatchEvent for CreateWalletModal {
 impl CreateWalletModal {
     pub fn show(&mut self, cx: &mut Cx) {
         self.state = CreateWalletModalState::WaitingForUserInput;
-        let accept_button = self.view.button(ids!(accept_button));
-        let cancel_button = self.view.button(ids!(cancel_button));
+        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(cx, ids!(cancel_button));
         accept_button.set_text(cx, "Create Wallet");
         cancel_button.set_text(cx, "Cancel");
         accept_button.reset_hover(cx);
@@ -457,11 +455,11 @@ impl CreateWalletModal {
         accept_button.set_visible(cx, true);
         cancel_button.set_visible(cx, true);
         // TODO: return buttons to their default state/appearance
-        self.view.text_input(ids!(wallet_name_input)).set_is_read_only(cx, false);
-        self.view.text_input(ids!(wallet_file_name_input)).set_is_read_only(cx, false);
-        self.view.text_input(ids!(password_input)).set_is_read_only(cx, false);
-        self.view.text_input(ids!(confirm_password_input)).set_is_read_only(cx, false);
-        self.view.label(ids!(status_label)).set_text(cx, "");
+        self.view.text_input(cx, ids!(wallet_name_input)).set_is_read_only(cx, false);
+        self.view.text_input(cx, ids!(wallet_file_name_input)).set_is_read_only(cx, false);
+        self.view.text_input(cx, ids!(password_input)).set_is_read_only(cx, false);
+        self.view.text_input(cx, ids!(confirm_password_input)).set_is_read_only(cx, false);
+        self.view.label(cx, ids!(status_label)).set_text(cx, "");
         self.is_showing_error = false;
         self.view.redraw(cx);        
     }
diff --git a/src/tsp/mod.rs b/src/tsp/mod.rs
index d360acb57..4a032afe8 100644
--- a/src/tsp/mod.rs
+++ b/src/tsp/mod.rs
@@ -22,15 +22,15 @@ pub mod tsp_verification_modal;
 pub mod wallet_entry;
 pub mod verify_user;
 
-pub fn live_design(cx: &mut Cx) {
-    create_did_modal::live_design(cx);
-    create_wallet_modal::live_design(cx);
-    wallet_entry::live_design(cx);
-    verify_user::live_design(cx);
-    sign_anycast_checkbox::live_design(cx);
-    tsp_sign_indicator::live_design(cx);
-    tsp_verification_modal::live_design(cx);
-    tsp_settings_screen::live_design(cx);
+pub fn script_mod(vm: &mut ScriptVm) {
+    create_did_modal::script_mod(vm);
+    create_wallet_modal::script_mod(vm);
+    wallet_entry::script_mod(vm);
+    verify_user::script_mod(vm);
+    sign_anycast_checkbox::script_mod(vm);
+    tsp_sign_indicator::script_mod(vm);
+    tsp_verification_modal::script_mod(vm);
+    tsp_settings_screen::script_mod(vm);
 }
 
 /// The sender used by [`submit_tsp_request()`] to send TSP requests to the async worker thread.
@@ -102,7 +102,7 @@ impl TspState {
             current_local_vid: None,
             associations: BTreeMap::new(),
             receive_loop_tasks: BTreeMap::new(),
-            pending_verification_requests: SmallVec::new_const(),
+            pending_verification_requests: SmallVec::new(),
         }
     }
 
@@ -174,7 +174,7 @@ impl TspState {
             current_local_vid,
             associations: saved_state.associations,
             receive_loop_tasks: BTreeMap::new(),
-            pending_verification_requests: SmallVec::new_const(),
+            pending_verification_requests: SmallVec::new(),
         })
     }
 
diff --git a/src/tsp/sign_anycast_checkbox.rs b/src/tsp/sign_anycast_checkbox.rs
index 031025da0..8634c05ee 100644
--- a/src/tsp/sign_anycast_checkbox.rs
+++ b/src/tsp/sign_anycast_checkbox.rs
@@ -3,15 +3,14 @@
 
 use makepad_widgets::*;
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
 
-    pub TspSignAnycastCheckbox = <CheckBoxFlat> {
+    mod.widgets.TspSignAnycastCheckbox = CheckBoxFlat {
         text: "TSP",
         active: false,
     }
diff --git a/src/tsp/tsp_settings_screen.rs b/src/tsp/tsp_settings_screen.rs
index 0552a01df..07a21bfda 100644
--- a/src/tsp/tsp_settings_screen.rs
+++ b/src/tsp/tsp_settings_screen.rs
@@ -1,118 +1,113 @@
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 
 use crate::{shared::{popup_list::{enqueue_popup_notification, PopupKind}, styles::*}, tsp::{create_did_modal::CreateDidModalAction, create_wallet_modal::CreateWalletModalAction, submit_tsp_request, tsp_state_ref, TspIdentityAction, TspRequest, TspWalletAction, TspWalletEntry, TspWalletMetadata}};
 
 const REPUBLISH_IDENTITY_BUTTON_TEXT: &str = "Republish Current Identity to DID Server";
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
-    use crate::tsp::wallet_entry::*;
 
-    REPUBLISH_IDENTITY_BUTTON_TEXT = "Republish Current Identity to DID Server"
+    mod.widgets.REPUBLISH_IDENTITY_BUTTON_TEXT = "Republish Current Identity to DID Server"
 
     // The view containing all TSP-related settings.
-    pub TspSettingsScreen = {{TspSettingsScreen}} {
+    mod.widgets.TspSettingsScreen = #(TspSettingsScreen::register_widget(vm)) {
         width: Fill, height: Fit
         flow: Down
 
-        <TitleLabel> {
+        TitleLabel {
             text: "TSP Wallet Settings"
         }
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Your active identity:"
         }
 
-        <View> {
+        View {
             width: Fill, height: Fit
             flow: Right,
             spacing: 10
 
-            copy_identity_button = <RobrixIconButton> {
-                margin: {left: 5}
+            copy_identity_button := RobrixIconButton {
+                margin: Inset{left: 5}
                 padding: 12,
                 spacing: 0,
-                draw_bg: {
-                    color: (COLOR_SECONDARY)
+                draw_bg +: {
+                    color: instance((COLOR_SECONDARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_COPY)
+                draw_icon +: {
+                    svg: (ICON_COPY)
                 }
-                icon_walk: {width: 16, height: 16, margin: {right: -2} }
+                icon_walk: Walk{width: 16, height: 16, margin: Inset{right: -2} }
             }
 
-            current_identity_label = <Label> {
+            current_identity_label := Label {
                 width: Fill, height: Fit
-                flow: RightWrap,
-                margin: {top: 10}
-                draw_text: {
+                flow: Flow.Right{wrap: true},
+                margin: Inset{top: 10}
+                draw_text +: {
                     wrap: Line,
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
             }
         }
 
-        republish_identity_button = <RobrixIconButton> {
+        republish_identity_button := RobrixIconButton {
             width: Fit, height: Fit,
             padding: 10,
-            margin: {top: 8, bottom: 10, left: 5},
+            margin: Inset{top: 8, bottom: 10, left: 5},
 
-            draw_bg: {
-                color: (COLOR_ACTIVE_PRIMARY),
+            draw_bg +: {
+                color: instance((COLOR_ACTIVE_PRIMARY)),
                 border_radius: 5
             }
-            draw_icon: {
-                svg_file: (ICON_UPLOAD)
+            draw_icon +: {
+                svg: (ICON_UPLOAD)
                 color: (COLOR_PRIMARY),
             }
-            icon_walk: {width: 16, height: 16}
-            draw_text: {
+            icon_walk: Walk{width: 16, height: 16}
+            draw_text +: {
                 color: (COLOR_PRIMARY),
             }
             text: (REPUBLISH_IDENTITY_BUTTON_TEXT)
         }
 
 
-        <SubsectionLabel> {
+        SubsectionLabel {
             text: "Your Wallets:"
         }
 
-        no_wallets_label = <View> {
+        no_wallets_label := View {
             width: Fill, height: Fit
-            <Label> {
+            Label {
                 width: Fill, height: Fit
-                margin: {top: 10, bottom: 8, left: 13, right: 10},
-                flow: RightWrap,
-                draw_text: {
+                margin: Inset{top: 10, bottom: 8, left: 13, right: 10},
+                flow: Flow.Right{wrap: true},
+                draw_text +: {
                     wrap: Line,
                     color: (COLOR_WARNING_NOT_FOUND),
-                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                 }
                 text: "No wallets found. Create or import a wallet."
             }
         }
 
-        <RoundedView> {
+        RoundedView {
             width: Fill, height: Fit
             margin: 5,
 
             show_bg: true,
-            draw_bg: {
-                color: #F6F8F9,
+            draw_bg +: {
+                color: instance(#F6F8F9),
                 border_radius: 4.0,
             }
 
-            wallet_list = <FlatList> {
+            wallet_list := FlatList {
                 width: Fill,
                 height: Fit,
                 spacing: 0.0
@@ -122,77 +117,77 @@ live_design! {
                 drag_scrolling: true,
                 scroll_bars: { show_scroll_x: false, show_scroll_y: false },
 
-                wallet_entry = <WalletEntry> { }
+                wallet_entry := WalletEntry { }
             }
         }
 
-        <View> {
-            margin: {top: 5},
+        View {
+            margin: Inset{top: 5},
             width: Fill, height: Fit
-            flow: RightWrap,
-            align: {y: 0.5},
+            flow: Flow.Right{wrap: true},
+            align: Align{y: 0.5},
             spacing: 10
 
-            create_did_button = <RobrixIconButton> {
+            create_did_button := RobrixIconButton {
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: {left: 5},
+                margin: Inset{left: 5},
 
-                draw_bg: {
-                    border_color: (COLOR_FG_ACCEPT_GREEN),
-                    color: (COLOR_BG_ACCEPT_GREEN),
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                    color: instance((COLOR_BG_ACCEPT_GREEN)),
                     border_radius: 5
                 }
-                draw_icon: {
-                    svg_file: (ICON_ADD_USER)
+                draw_icon +: {
+                    svg: (ICON_ADD_USER)
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
-                icon_walk: {width: 21, height: Fit, margin: 0}
-                draw_text: {
+                icon_walk: Walk{width: 21, height: Fit, margin: 0}
+                draw_text +: {
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
                 text: "Create New Identity (DID)"
             }
 
-            create_wallet_button = <RobrixIconButton> {
+            create_wallet_button := RobrixIconButton {
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: {left: 5},
+                margin: Inset{left: 5},
 
-                draw_bg: {
-                    border_color: (COLOR_FG_ACCEPT_GREEN),
-                    color: (COLOR_BG_ACCEPT_GREEN),
+                draw_bg +: {
+                    border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                    color: instance((COLOR_BG_ACCEPT_GREEN)),
                     border_radius: 5
                 }
-                draw_icon: {
-                    svg_file: (ICON_ADD_WALLET)
+                draw_icon +: {
+                    svg: (ICON_ADD_WALLET)
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
-                icon_walk: {width: 21, height: Fit, margin: 0}
-                draw_text: {
+                icon_walk: Walk{width: 21, height: Fit, margin: 0}
+                draw_text +: {
                     color: (COLOR_FG_ACCEPT_GREEN),
                 }
                 text: "Create New Wallet"
             }
 
-            import_wallet_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                margin: {left: 5}
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+            import_wallet_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                margin: Inset{left: 5}
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_PRIMARY)
-                    text_style: <REGULAR_TEXT> {}
+                    text_style: REGULAR_TEXT {}
                 }
                 text: "Import Existing Wallet"
                 // TODO: fix this icon, or pick a different SVG
-                // draw_icon: {
-                //     svg_file: (ICON_IMPORT)
+                // draw_icon +: {
+                //     svg: (ICON_IMPORT)
                 //     color: (COLOR_PRIMARY)
                 // }
-                // icon_walk: {width: 16, height: 16}
-                icon_walk: {width: 0, height: 0}
+                // icon_walk: Walk{width: 16, height: 16}
+                icon_walk: Walk{width: 0, height: 0}
             }
         }
     }
@@ -248,7 +243,7 @@ impl WalletStatusAndDefault {
 }
 
 /// The view containing all TSP-related settings.
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct TspSettingsScreen {
     #[deref] view: View,
 
@@ -285,16 +280,16 @@ impl Widget for TspSettingsScreen {
             Some(current_did) => (current_did, COLOR_FG_ACCEPT_GREEN, true),
             None => ("No default identity has been set.", COLOR_WARNING_NOT_FOUND, false),
         };
-        self.view.label(ids!(current_identity_label)).apply_over(cx, live!(
+        self.view.label(cx, ids!(current_identity_label)).apply_over(cx, live!(
             text: (current_did_text),
             draw_text: { color: (current_did_text_color) },
         ));
-        self.view.button(ids!(republish_identity_button)).set_visible(cx, show_republish_button);
+        self.view.button(cx, ids!(republish_identity_button)).set_visible(cx, show_republish_button);
 
 
         // If we don't have any wallets, show the "no wallets" label.
         let is_wallets_empty = self.wallets.as_ref().is_none_or(|w| w.is_empty());
-        self.view.view(ids!(no_wallets_label)).set_visible(cx, is_wallets_empty);
+        self.view.view(cx, ids!(no_wallets_label)).set_visible(cx, is_wallets_empty);
 
         while let Some(subview) = self.view.draw_walk(cx, scope, walk).step() {
             // Here, we only need to handle drawing the wallet list.
@@ -322,7 +317,7 @@ impl Widget for TspSettingsScreen {
 
 impl MatchEvent for TspSettingsScreen {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let republish_identity_button = self.view.button(ids!(republish_identity_button));
+        let republish_identity_button = self.view.button(cx, ids!(republish_identity_button));
 
         for action in actions {
             match action.downcast_ref() {
@@ -462,7 +457,7 @@ impl MatchEvent for TspSettingsScreen {
         }
 
 
-        if self.view.button(ids!(copy_identity_button)).clicked(actions) { 
+        if self.view.button(cx, ids!(copy_identity_button)).clicked(actions) { 
             if let Some(did) = self.wallets.as_ref().and_then(|ws| ws.active_identity.as_deref()) {
                 cx.copy_to_clipboard(did);
                 enqueue_popup_notification(
@@ -482,7 +477,7 @@ impl MatchEvent for TspSettingsScreen {
         // Allow the user to republish their identity to the DID server.
         // This is primarily needed because some DID servers (e.g., the test servers)
         // frequently wipe their identity storage after a certain period of time.
-        if self.view.button(ids!(republish_identity_button)).clicked(actions) {
+        if self.view.button(cx, ids!(republish_identity_button)).clicked(actions) {
             if self.has_default_wallet() {
                 if let Some(our_did) = self.wallets.as_ref().and_then(|ws| ws.active_identity.as_deref()) {
                     republish_identity_button.apply_over(cx, live!(
@@ -501,17 +496,17 @@ impl MatchEvent for TspSettingsScreen {
             }
         }
 
-        if self.view.button(ids!(create_wallet_button)).clicked(actions) {
+        if self.view.button(cx, ids!(create_wallet_button)).clicked(actions) {
             cx.action(CreateWalletModalAction::Open);
         }
 
-        if self.view.button(ids!(create_did_button)).clicked(actions) {
+        if self.view.button(cx, ids!(create_did_button)).clicked(actions) {
             if self.has_default_wallet() {
                 cx.action(CreateDidModalAction::Open);
             }
         }
 
-        if self.view.button(ids!(import_wallet_button)).clicked(actions) {
+        if self.view.button(cx, ids!(import_wallet_button)).clicked(actions) {
             // TODO: support importing an existing wallet.
             enqueue_popup_notification(
                 "Importing an existing wallet is not yet implemented.",
diff --git a/src/tsp/tsp_sign_indicator.rs b/src/tsp/tsp_sign_indicator.rs
index 69cbf9d0c..2c95bd168 100644
--- a/src/tsp/tsp_sign_indicator.rs
+++ b/src/tsp/tsp_sign_indicator.rs
@@ -2,29 +2,27 @@
 
 use makepad_widgets::*;
 
-use crate::shared::{callout_tooltip::{CalloutTooltipOptions, TooltipAction}, styles::*};
+use crate::shared::styles::*;
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
 
-    pub TspSignIndicator = {{TspSignIndicator}} {
+    mod.widgets.TspSignIndicator = #(TspSignIndicator::register_widget(vm)) {
         visible: false, // default to hidden
         width: Fit, height: Fit
         flow: Right,
         padding: 0,
-        margin: { top: 5 }
+        margin: Inset{ top: 5 }
 
         // TODO: re-enable this once we have implemented the ability
         // to click on the indicator to show the user's profile and TSP info.
-        // cursor: Hand,
+        // cursor: MouseCursor.Hand,
 
-        tsp_html = <Html> {
+        tsp_html := Html {
             width: Fit, height: Fit
             flow: Right, // do not wrap
             padding: 0,
@@ -61,7 +59,7 @@ pub enum TspSignState {
 ///   a red exclamation mark '❗' is shown (could also use a red X '❌').
 /// * If the message doesn't contain a TSP signature, nothing at all is shown.
 ///
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct TspSignIndicator {
     #[deref] view: View,
     #[rust] state: TspSignState,
@@ -81,7 +79,7 @@ impl Widget for TspSignIndicator {
             //     false
             // },
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
                 false
             }
             _ => false,
@@ -102,8 +100,7 @@ impl Widget for TspSignIndicator {
                 ),
             };
             cx.widget_action(
-                self.widget_uid(),
-                &scope.path,
+                self.widget_uid(), 
                 TooltipAction::HoverIn {
                     text: text.to_string(),
                     widget_rect: area.rect(cx),
@@ -124,7 +121,7 @@ impl Widget for TspSignIndicator {
 impl TspSignIndicator {
     /// Sets this indicator to show given state of this message's TSP signature.
     pub fn show_with_state(&mut self, cx: &mut Cx, state: TspSignState) {
-        let tsp_html_ref = self.view.html(ids!(tsp_html));
+        let tsp_html_ref = self.view.html(cx, ids!(tsp_html));
         if let Some(mut tsp_html) = tsp_html_ref.borrow_mut() {
             let (text, font_color) = match state {
                 TspSignState::Unknown => {
@@ -157,10 +154,11 @@ impl TspSignIndicatorRef {
 
 
 /// Actions emitted by an `TspSignIndicator` widget.
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum TspSignIndicatorAction {
     /// The indicator was clicked, and thus we should open
     /// a modal/dialog showing the message's full edit history.
     ShowEditHistory,
+    #[default]
     None,
 }
diff --git a/src/tsp/tsp_verification_modal.rs b/src/tsp/tsp_verification_modal.rs
index f2430c653..32465a125 100644
--- a/src/tsp/tsp_verification_modal.rs
+++ b/src/tsp/tsp_verification_modal.rs
@@ -1,108 +1,107 @@
 
 use makepad_widgets::*;
+use crate::ApplyOverCompat;
 use tsp_sdk::AsyncSecureStore;
 
 use crate::{shared::styles::*, sliding_sync::current_user_id, tsp::{submit_tsp_request, TspRequest, TspVerificationDetails}};
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub TspVerificationModal = {{TspVerificationModal}} {
+    mod.widgets.TspVerificationModal = #(TspVerificationModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        <RoundedView> {
+        RoundedView {
             flow: Down
             width: 400
             height: Fit
-            padding: {top: 25, right: 30 bottom: 30 left: 45}
+            padding: Inset{top: 25, right: 30 bottom: 30 left: 45}
             spacing: 10
 
             show_bg: true
-            draw_bg: {
-                color: #fff
+            draw_bg +: {
+                color: instance(#fff)
                 border_radius: 3.0
             }
 
-            title = <View> {
+            title := View {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: {top: 0, bottom: 40}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 40}
+                align: Align{x: 0.5, y: 0.0}
 
-                <Label> {
+                Label {
                     text: "TSP Verification Request"
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
                     }
                 }
             }
 
-            body = <View> {
+            body := View {
                 width: Fill,
                 height: Fit,
                 flow: Down,
                 spacing: 40,
 
-                prompt = <Label> {
+                prompt := Label {
                     width: Fill
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {
                             font_size: 11.5,
                         },
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Right,
-                    align: {x: 1.0, y: 0.5}
+                    align: Align{x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button = <RobrixIconButton> {
-                        align: {x: 0.5, y: 0.5}
+                    cancel_button := RobrixIconButton {
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon: {
-                            svg_file: (ICON_FORBIDDEN)
+                        draw_icon +: {
+                            svg: (ICON_FORBIDDEN)
                             color: (COLOR_FG_DANGER_RED),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
         
-                        draw_bg: {
-                            border_color: (COLOR_FG_DANGER_RED),
-                            color: (COLOR_BG_DANGER_RED)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_DANGER_RED)),
+                            color: instance((COLOR_BG_DANGER_RED))
                         }
                         text: "Ignore Request"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_DANGER_RED),
                         }
                     }
 
-                    accept_button = <RobrixIconButton> {
-                        align: {x: 0.5, y: 0.5}
+                    accept_button := RobrixIconButton {
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon: {
-                            svg_file: (ICON_CHECKMARK)
+                        draw_icon +: {
+                            svg: (ICON_CHECKMARK)
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
         
-                        draw_bg: {
-                            border_color: (COLOR_FG_ACCEPT_GREEN),
-                            color: (COLOR_BG_ACCEPT_GREEN)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                            color: instance((COLOR_BG_ACCEPT_GREEN))
                         }
                         text: "Accept Request"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
                     }
@@ -112,7 +111,7 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct TspVerificationModal {
     #[deref] view: View,
     #[rust] state: TspVerificationModalState,
@@ -169,8 +168,8 @@ impl Widget for TspVerificationModal {
 
 impl WidgetMatchEvent for TspVerificationModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let accept_button = self.button(ids!(accept_button));
-        let cancel_button = self.button(ids!(cancel_button));
+        let accept_button = self.button(cx, ids!(accept_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
 
         let cancel_button_clicked = cancel_button.clicked(actions);
         let modal_dismissed = actions
@@ -199,7 +198,7 @@ impl WidgetMatchEvent for TspVerificationModal {
             return;
         }
 
-        let prompt_label = self.view.label(ids!(prompt));
+        let prompt_label = self.view.label(cx, ids!(prompt));
         if accept_button.clicked(actions) {
             let current_state = std::mem::take(&mut self.state);
             let new_state: TspVerificationModalState;
@@ -238,7 +237,7 @@ impl WidgetMatchEvent for TspVerificationModal {
                         accept_button.apply_over(cx, live!(
                             text: "Okay",
                             draw_bg: {
-                                color: (COLOR_ACTIVE_PRIMARY),
+                                color: instance((COLOR_ACTIVE_PRIMARY)),
                             },
                             draw_icon: {
                                 color: (COLOR_PRIMARY),
@@ -292,11 +291,11 @@ impl WidgetMatchEvent for TspVerificationModal {
                 {
                     match result {
                         Ok(()) => {
-                            self.label(ids!(prompt)).set_text(cx, "The TSP verification process has completed successfully.\n\nYou may now close this.");
+                            self.label(cx, ids!(prompt)).set_text(cx, "The TSP verification process has completed successfully.\n\nYou may now close this.");
                             self.state = TspVerificationModalState::RequestVerified;
                         }
                         Err(e) => {
-                            self.label(ids!(prompt)).set_text(cx, &format!("Error: failed to complete the TSP verification process:\n\n{e}"));
+                            self.label(cx, ids!(prompt)).set_text(cx, &format!("Error: failed to complete the TSP verification process:\n\n{e}"));
                             self.state = TspVerificationModalState::RequestDeclined;
                         }
                     }
@@ -305,7 +304,7 @@ impl WidgetMatchEvent for TspVerificationModal {
                         enabled: true,
                         text: "Okay",
                         draw_bg: {
-                            color: (COLOR_ACTIVE_PRIMARY),
+                            color: instance((COLOR_ACTIVE_PRIMARY)),
                         },
                         draw_icon: {
                             color: (COLOR_PRIMARY),
@@ -339,10 +338,10 @@ impl TspVerificationModal {
             details.responding_vid,
             details.responding_user_id,
         );
-        self.label(ids!(prompt)).set_text(cx, &prompt_text);
+        self.label(cx, ids!(prompt)).set_text(cx, &prompt_text);
 
-        let accept_button = self.button(ids!(accept_button));
-        let cancel_button = self.button(ids!(cancel_button));
+        let accept_button = self.button(cx, ids!(accept_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
         accept_button.set_text(cx, "Accept Request");
         accept_button.set_enabled(cx, true);
         accept_button.set_visible(cx, true);
diff --git a/src/tsp/verify_user.rs b/src/tsp/verify_user.rs
index 39f43e3d3..4b61c2d5c 100644
--- a/src/tsp/verify_user.rs
+++ b/src/tsp/verify_user.rs
@@ -4,124 +4,119 @@ use matrix_sdk::ruma::OwnedUserId;
 
 use crate::{shared::popup_list::{enqueue_popup_notification, PopupKind}, tsp::{submit_tsp_request, tsp_state_ref, TspIdentityAction, TspRequest}};
 
-live_design! {
+script_mod! {
     link tsp_enabled
 
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
     // A view that allows the user to verify a new DID and associate it
     // with a particular Matrix User ID.
     // This is currently shown as part of the UserProfileSlidingPane.
-    pub TspVerifyUser = {{TspVerifyUser}} {
+    mod.widgets.TspVerifyUser = #(TspVerifyUser::register_widget(vm)) {
         width: Fill, height: Fit
         flow: Down
         spacing: 20,
 
-        <LineH> { padding: 15 }
+        LineH { padding: 15 }
 
-        <View> {
+        View {
             width: Fill, height: Fit
             flow: Down
             spacing: 10
-            padding: { left: 10, right: 10, bottom: 10}
+            padding: Inset{ left: 10, right: 10, bottom: 10}
 
-            <Label> {
+            Label {
                 width: Fill, height: Fit
-                draw_text: {
-                    wrap: Word,
-                    text_style: <USERNAME_TEXT_STYLE>{ font_size: 11.5 },
+                draw_text +: {
+                    flow: Flow.Right{wrap: true},
+                    text_style: USERNAME_TEXT_STYLE { font_size: 11.5 },
                     color: #000
                 }
                 text: "TSP User Verification"
             }
 
             // Content shown when this user has been verified via TSP.
-            verified_tsp = <View> {
+            verified_tsp := View {
                 visible: false,
                 width: Fill, height: Fit
                 flow: Down,
                 spacing: 10,
-                // margin: { left: 7 }
+                // margin: Inset{ left: 7 }
 
-                <Label> {
+                Label {
                     width: Fill, height: Fit
-                    draw_text: {
+                    draw_text +: {
                         wrap: Line,
                         color: (COLOR_FG_ACCEPT_GREEN),
-                        text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                        text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                     }
                     text: "✅ Verified via TSP"
                 }
 
-                tsp_did_read_only_input = <SimpleTextInput> {
+                tsp_did_read_only_input := SimpleTextInput {
                     is_read_only: true
                 }
 
-                remove_tsp_association_button = <RobrixIconButton> {
-                    padding: {top: 10, bottom: 10, left: 12, right: 15}
-                    draw_bg: {
-                        border_color: (COLOR_FG_DANGER_RED),
-                        color: (COLOR_BG_DANGER_RED)
+                remove_tsp_association_button := RobrixIconButton {
+                    padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_DANGER_RED)),
+                        color: instance((COLOR_BG_DANGER_RED))
                     }
-                    draw_icon: {
-                        svg_file: (ICON_CLOSE)
+                    draw_icon +: {
+                        svg: (ICON_CLOSE)
                         color: (COLOR_FG_DANGER_RED),
                     }
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_FG_DANGER_RED),
-                        text_style: <REGULAR_TEXT> {}
+                        text_style: REGULAR_TEXT {}
                     }
-                    icon_walk: {width: 22, height: 16, margin: {left: -5, right: -3, top: 1, bottom: -1} }
+                    icon_walk: Walk{width: 22, height: 16, margin: Inset{left: -5, right: -3, top: 1, bottom: -1} }
                     text: "Remove TSP Association"
                 }
             }
 
 
             // Content shown when this user has NOT been verified via TSP.
-            unverified_tsp = <View> {
+            unverified_tsp := View {
                 visible: true,
                 width: Fill, height: Fit
                 flow: Down,
                 spacing: 10,
-                // margin: { left: 7 }
+                // margin: Inset{ left: 7 }
 
-                <Label> {
+                Label {
                     width: Fill, height: Fit
-                    flow: RightWrap,
-                    draw_text: {
-                        wrap: Word,
+                    flow: Flow.Right{wrap: true},
+                    draw_text +: {
+                        flow: Flow.Right{wrap: true},
                         color: (MESSAGE_TEXT_COLOR),
-                        text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                        text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                     }
                     text: "Interactively verify this user by associating their TSP identity (DID) with their Matrix User ID:"
                 }
 
-                tsp_did_input = <SimpleTextInput> {
+                tsp_did_input := SimpleTextInput {
                     empty_text: "Enter their TSP DID..."
                 }
 
-                verify_user_button = <RobrixIconButton> {
-                    padding: {top: 10, bottom: 10, left: 12, right: 15}
-                    draw_bg: {
-                        border_color: (COLOR_FG_ACCEPT_GREEN),
-                        color: (COLOR_BG_ACCEPT_GREEN)
+                verify_user_button := RobrixIconButton {
+                    padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                    draw_bg +: {
+                        border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                        color: instance((COLOR_BG_ACCEPT_GREEN))
                     }
-                    draw_icon: {
-                        svg_file: (ICON_CHECKMARK)
+                    draw_icon +: {
+                        svg: (ICON_CHECKMARK)
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN)
-                        text_style: <REGULAR_TEXT> {}
+                        text_style: REGULAR_TEXT {}
                     }
-                    icon_walk: {width: 22, height: 16, margin: {left: -5, right: -3, top: 1, bottom: -1} }
+                    icon_walk: Walk{width: 22, height: 16, margin: Inset{left: -5, right: -3, top: 1, bottom: -1} }
                     text: "Verify this user via TSP"
                 }
             }
@@ -139,7 +134,7 @@ pub enum TspVerifiedInfo {
     },
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct TspVerifyUser {
     #[deref] view: View,
     /// The Matrix User ID of the other user that we want to verify.
@@ -160,7 +155,7 @@ impl Widget for TspVerifyUser {
 }
 impl MatchEvent for TspVerifyUser {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        if self.view.button(ids!(remove_tsp_association_button)).clicked(actions) {
+        if self.view.button(cx, ids!(remove_tsp_association_button)).clicked(actions) {
             enqueue_popup_notification(
                 "Removing a TSP association is not yet implemented",
                 PopupKind::Warning,
@@ -168,9 +163,9 @@ impl MatchEvent for TspVerifyUser {
             );
         }
 
-        let verify_user_button = self.view.button(ids!(verify_user_button));
+        let verify_user_button = self.view.button(cx, ids!(verify_user_button));
         if verify_user_button.clicked(actions) {
-            let did_input = self.view.view(ids!(tsp_did_input));
+            let did_input = self.view.view(cx, ids!(tsp_did_input));
             let did = did_input.text().trim().to_string();
             log!("verify_user_button was clicked. DID: {}", did);
             if did.is_empty() {
@@ -239,19 +234,19 @@ impl MatchEvent for TspVerifyUser {
 impl TspVerifyUser {
     /// Repopulates this widget's UI content from its inner verified info.
     fn refresh_from_verified_info(&mut self, cx: &mut Cx) {
-        let verified_tsp_view = self.view.view(ids!(verified_tsp));
-        let unverified_tsp_view = self.view.view(ids!(unverified_tsp));
+        let verified_tsp_view = self.view.view(cx, ids!(verified_tsp));
+        let unverified_tsp_view = self.view.view(cx, ids!(unverified_tsp));
         match &self.verified_info {
             TspVerifiedInfo::Verified { did } => {
                 verified_tsp_view.set_visible(cx, true);
                 unverified_tsp_view.set_visible(cx, false);
-                verified_tsp_view.text_input(ids!(tsp_did_read_only_input)).set_text(cx, did);
+                verified_tsp_view.text_input(cx, ids!(tsp_did_read_only_input)).set_text(cx, did);
             }
             TspVerifiedInfo::Unverified => {
                 verified_tsp_view.set_visible(cx, false);
                 unverified_tsp_view.set_visible(cx, true);
-                unverified_tsp_view.text_input(ids!(tsp_did_input)).set_text(cx, "");
-                let verify_user_button = unverified_tsp_view.button(ids!(verify_user_button));
+                unverified_tsp_view.text_input(cx, ids!(tsp_did_input)).set_text(cx, "");
+                let verify_user_button = unverified_tsp_view.button(cx, ids!(verify_user_button));
                 verify_user_button.set_enabled(cx, true);
                 verify_user_button.set_text(cx, "Verify this user via TSP");
             }
diff --git a/src/tsp/wallet_entry/mod.rs b/src/tsp/wallet_entry/mod.rs
index b40ab4205..1980424e3 100644
--- a/src/tsp/wallet_entry/mod.rs
+++ b/src/tsp/wallet_entry/mod.rs
@@ -9,143 +9,138 @@ use crate::{
     tsp::{submit_tsp_request, tsp_settings_screen::{WalletStatus, WalletStatusAndDefault}, TspRequest, TspWalletMetadata}
 };
 
-live_design! {
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::helpers::*;
-    use crate::shared::styles::*;
-    use crate::shared::avatar::*;
-    use crate::shared::icon_button::*;
 
     // An entry in the list of wallets.
-    pub WalletEntry = {{WalletEntry}} {
+    mod.widgets.WalletEntry = #(WalletEntry::register_widget(vm)) {
         width: Fill, height: Fit
         flow: Down
 
-        <View> {
+        View {
             width: Fill, height: Fit
-            flow: RightWrap,
+            flow: Flow.Right{wrap: true},
             padding: 10
 
-            wallet_name = <Label> {
+            wallet_name := Label {
                 width: Fit, height: Fit
                 flow: Right,
-                margin: {top: 2.4, left: 0}
-                draw_text: {
+                margin: Inset{top: 2.4, left: 0}
+                draw_text +: {
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <THEME_FONT_BOLD>{ font_size: 12 },
+                    text_style: theme.font_bold { font_size: 12 },
                 }
                 text: "[Wallet Name]"
             }
 
-            wallet_path = <Label> {
+            wallet_path := Label {
                 width: Fit, height: Fit
                 flow: Right,
-                margin: {top: 2.9, left: 8, bottom: 2}
-                draw_text: {
+                margin: Inset{top: 2.9, left: 8, bottom: 2}
+                draw_text +: {
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <THEME_FONT_REGULAR>{ font_size: 11 },
+                    text_style: theme.font_regular { font_size: 11 },
                 }
                 text: "[Wallet Path/URL]"
             }
 
-            is_default_label_view = <View> {
+            is_default_label_view := View {
                 visible: false,
                 width: Fit, height: Fit
-                margin: {left: 20}
-                <Label> {
-                    margin: {top: 2.9}
+                margin: Inset{left: 20}
+                Label {
+                    margin: Inset{top: 2.9}
                     width: Fit, height: Fit
                     flow: Right,
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_FG_ACCEPT_GREEN),
-                        text_style: <THEME_FONT_BOLD>{ font_size: 11 },
+                        text_style: theme.font_bold { font_size: 11 },
                     }
                     text: "✅ Default"
                 }
             }
 
-            not_found_label_view = <View> {
+            not_found_label_view := View {
                 visible: false,
                 width: Fit, height: Fit
-                margin: {left: 20}
-                <Label> {
-                    margin: {top: 2.9}
+                margin: Inset{left: 20}
+                Label {
+                    margin: Inset{top: 2.9}
                     width: Fit, height: Fit
                     flow: Right,
-                    draw_text: {
+                    draw_text +: {
                         color: (COLOR_FG_DANGER_RED),
-                        text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                        text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
                     }
                     text: "Wallet not found!"
                 }
             }
 
-            set_default_wallet_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                margin: {left: 20}
-                draw_bg: {
-                    color: (COLOR_ACTIVE_PRIMARY)
+            set_default_wallet_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                margin: Inset{left: 20}
+                draw_bg +: {
+                    color: instance((COLOR_ACTIVE_PRIMARY))
                 }
-                draw_icon: {
-                    svg_file: (ICON_CHECKMARK)
+                draw_icon +: {
+                    svg: (ICON_CHECKMARK)
                     color: (COLOR_PRIMARY)
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_PRIMARY)
-                    text_style: <REGULAR_TEXT> {}
+                    text_style: REGULAR_TEXT {}
                 }
-                icon_walk: {width: 16, height: 16}
+                icon_walk: Walk{width: 16, height: 16}
                 text: "Set As Default"
             }
 
-            remove_wallet_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                margin: {left: 20}
-                draw_bg: {
-                    color: (COLOR_BG_DANGER_RED)
-                    border_color: (COLOR_FG_DANGER_RED)
+            remove_wallet_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                margin: Inset{left: 20}
+                draw_bg +: {
+                    color: instance((COLOR_BG_DANGER_RED))
+                    border_color: instance((COLOR_FG_DANGER_RED))
                 }
-                draw_icon: {
-                    svg_file: (ICON_CLOSE),
+                draw_icon +: {
+                    svg: (ICON_CLOSE),
                     color: (COLOR_FG_DANGER_RED),
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
-                icon_walk: { width: 16, height: 16 }
+                icon_walk: Walk{ width: 16, height: 16 }
                 text: "Remove From List"
             }
 
-            delete_wallet_button = <RobrixIconButton> {
-                padding: {top: 10, bottom: 10, left: 12, right: 15}
-                margin: {left: 20}
-                draw_bg: {
-                    color: (COLOR_BG_DANGER_RED)
-                    border_color: (COLOR_FG_DANGER_RED)
+            delete_wallet_button := RobrixIconButton {
+                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                margin: Inset{left: 20}
+                draw_bg +: {
+                    color: instance((COLOR_BG_DANGER_RED))
+                    border_color: instance((COLOR_FG_DANGER_RED))
                 }
-                draw_icon: {
-                    svg_file: (ICON_TRASH),
+                draw_icon +: {
+                    svg: (ICON_TRASH),
                     color: (COLOR_FG_DANGER_RED),
                 }
-                draw_text: {
+                draw_text +: {
                     color: (COLOR_FG_DANGER_RED),
                 }
-                icon_walk: { width: 16, height: 16 }
+                icon_walk: Walk{ width: 16, height: 16 }
                 text: "Delete Wallet"
             }
         }
 
-        <LineH> { padding: 10, margin: {left: 5, right: 5} }
+        LineH { padding: 10, margin: Inset{left: 5, right: 5} }
     }
 
 }
 
 
 /// A view showing the details of a single TSP wallet (one entry in the wallets list).
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct WalletEntry {
     #[deref] view: View,
 
@@ -158,11 +153,11 @@ impl Widget for WalletEntry {
 
         let Some(metadata) = self.metadata.as_ref() else { return };
         if let Event::Actions(actions) = event {
-            if self.view.button(ids!(set_default_wallet_button)).clicked(actions) {
+            if self.view.button(cx, ids!(set_default_wallet_button)).clicked(actions) {
                 submit_tsp_request(TspRequest::SetDefaultWallet(metadata.clone()));
             }
 
-            if self.view.button(ids!(remove_wallet_button)).clicked(actions) {
+            if self.view.button(cx, ids!(remove_wallet_button)).clicked(actions) {
                 let metadata_clone = metadata.clone();
                 let content = ConfirmationModalContent {
                     title_text: "Remove Wallet".into(),
@@ -172,7 +167,7 @@ impl Widget for WalletEntry {
                         metadata.wallet_name
                     ).into(),
                     accept_button_text: Some("Remove".into()),
-                    on_accept_clicked: Some(Box::new(move |_cx| {
+                    on_accept_clicked: Some(Box::new(move |cx| {
                         submit_tsp_request(TspRequest::RemoveWallet(metadata_clone));
                     })),
                     ..Default::default()
@@ -180,7 +175,7 @@ impl Widget for WalletEntry {
                 cx.action(ConfirmDeleteAction::Show(RefCell::new(Some(content))));
             }
 
-            if self.view.button(ids!(delete_wallet_button)).clicked(actions) {
+            if self.view.button(cx, ids!(delete_wallet_button)).clicked(actions) {
                 // TODO: Implement the delete wallet feature.
                 enqueue_popup_notification(
                     "Delete wallet feature is not yet implemented.",
@@ -200,11 +195,11 @@ impl Widget for WalletEntry {
             self.metadata = Some(metadata.clone());
         }
 
-        self.label(ids!(wallet_name)).set_text(
+        self.label(cx, ids!(wallet_name)).set_text(
             cx,
             &metadata.wallet_name,
         );
-        self.label(ids!(wallet_path)).set_text(
+        self.label(cx, ids!(wallet_path)).set_text(
             cx,
             metadata.url.as_url_unencoded()
         );
@@ -213,19 +208,19 @@ impl Widget for WalletEntry {
         // get their styling messed up in weird ways.
         // So, as a workaround, we just hide the button entirely and show a `is_default_label_view` instead.
 
-        self.view(ids!(is_default_label_view)).set_visible(
+        self.view(cx, ids!(is_default_label_view)).set_visible(
             cx,
             sd.is_default
         );
-        self.label(ids!(not_found_label_view)).set_visible(
+        self.label(cx, ids!(not_found_label_view)).set_visible(
             cx,
             sd.status == WalletStatus::NotFound,
         );
-        self.button(ids!(set_default_wallet_button)).set_visible(
+        self.button(cx, ids!(set_default_wallet_button)).set_visible(
             cx,
             !sd.is_default && sd.status != WalletStatus::NotFound,
         );
-        self.button(ids!(delete_wallet_button)).set_visible(
+        self.button(cx, ids!(delete_wallet_button)).set_visible(
             cx,
             sd.status != WalletStatus::NotFound,
         );
diff --git a/src/tsp_dummy/mod.rs b/src/tsp_dummy/mod.rs
index df0a0f278..82b002d1e 100644
--- a/src/tsp_dummy/mod.rs
+++ b/src/tsp_dummy/mod.rs
@@ -18,61 +18,56 @@
 
 use makepad_widgets::*;
 
-live_design! {
-    link tsp_disabled
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use link::theme::*;
-    use link::shaders::*;
-    use link::widgets::*;
 
-    use crate::shared::styles::*;
-    use crate::shared::helpers::*;
-
-    pub TspSettingsScreen = <View> {
+    mod.widgets.TspSettingsScreen = View {
         width: Fill, height: Fit
         flow: Down
-        align: {x: 0}
+        align: Align{x: 0}
 
-        <TitleLabel> {
+        TitleLabel {
             text: "TSP Wallet Settings"
         }
 
-        <Label> {
+        Label {
             width: Fill, height: Fit
-            flow: RightWrap,
-            align: {x: 0}
-            margin: {top: 10, bottom: 10}
-            draw_text: {
-                wrap: Word,
+            flow: Flow.Right{wrap: true},
+            align: Align{x: 0}
+            margin: Inset{top: 10, bottom: 10}
+            draw_text +: {
+                flow: Flow.Right{wrap: true},
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
+                text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
             }
             text: "TSP features are not included in this build.\nTo use TSP, build Robrix with the 'tsp' feature enabled."
         }
     }
 
-    pub CreateWalletModal = <View> {
+    mod.widgets.CreateWalletModal = View {
         visible: false,
     }
 
-    pub CreateDidModal = <View> {
+    mod.widgets.CreateDidModal = View {
         visible: false,
     }
 
-    pub TspVerifyUser = <View> {
+    mod.widgets.TspVerifyUser = View {
         height: 50
         width: Fill,
     }
 
-    pub TspVerificationModal = <View> {
+    mod.widgets.TspVerificationModal = View {
         visible: false
     }
 
-    pub TspSignAnycastCheckbox = <View> {
+    mod.widgets.TspSignAnycastCheckbox = View {
         visible: false
     }
 
-    pub TspSignIndicator = <View> {
+    mod.widgets.TspSignIndicator = View {
         visible: false
     }
 }
diff --git a/src/verification.rs b/src/verification.rs
index 2cf7bc329..85e503f02 100644
--- a/src/verification.rs
+++ b/src/verification.rs
@@ -1,6 +1,6 @@
 use std::sync::Arc;
 use futures_util::StreamExt;
-use makepad_widgets::{log, ActionDefaultRef, Cx, DefaultNone};
+use makepad_widgets::{log, Cx};
 use matrix_sdk_base::crypto::{AcceptedProtocols, CancelInfo, EmojiShortAuthString};
 use matrix_sdk::{
     encryption::{
@@ -14,9 +14,10 @@ use matrix_sdk::{
 };
 use tokio::{runtime::Handle, sync::mpsc::{UnboundedReceiver, UnboundedSender}};
 
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum VerificationStateAction {
     Update(VerificationState),
+    #[default]
     None,
 }
 
@@ -252,7 +253,7 @@ async fn request_verification_handler(client: Client, request: VerificationReque
 
 
 /// Actions related to verification that should be handled by the top-level app context.
-#[derive(Clone, Debug, DefaultNone)]
+#[derive(Clone, Debug, Default)]
 pub enum VerificationAction {
     /// Informs the main UI thread that a verification request has been received.
     RequestReceived(VerificationRequestActionState),
@@ -288,6 +289,7 @@ pub enum VerificationAction {
     SasConfirmationError(Arc<matrix_sdk::Error>),
     /// Informs the main UI thread that a verification request has been fully completed.
     RequestCompleted,
+    #[default]
     None,
 }
 
diff --git a/src/verification_modal.rs b/src/verification_modal.rs
index 324a92d6a..02c484e35 100644
--- a/src/verification_modal.rs
+++ b/src/verification_modal.rs
@@ -5,103 +5,101 @@ use matrix_sdk::encryption::verification::Verification;
 
 use crate::verification::{VerificationAction, VerificationRequestActionState, VerificationUserResponse};
 
-live_design! {
-    use link::theme::*;
-    use link::widgets::*;
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
 
-    use crate::shared::styles::*;
-    use crate::shared::icon_button::RobrixIconButton;
 
-    pub VerificationModal = {{VerificationModal}} {
+    mod.widgets.VerificationModal = #(VerificationModal::register_widget(vm)) {
         width: Fit
         height: Fit
 
-        <RoundedView> {
+        RoundedView {
             flow: Down
             width: 400
             height: Fit
-            padding: {top: 25, right: 30 bottom: 30 left: 45}
+            padding: Inset{top: 25, right: 30 bottom: 30 left: 45}
             spacing: 10
 
             show_bg: true
-            draw_bg: {
-                color: #fff
+            draw_bg +: {
+                color: instance(#fff)
                 border_radius: 3.0
             }
 
-            title = <View> {
+            title := View {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: {top: 0, bottom: 40}
-                align: {x: 0.5, y: 0.0}
+                padding: Inset{top: 0, bottom: 40}
+                align: Align{x: 0.5, y: 0.0}
 
-                <Label> {
+                Label {
                     text: "Verification Request"
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 13},
+                    draw_text +: {
+                        text_style: TITLE_TEXT {font_size: 13},
                         color: #000
                     }
                 }
             }
 
-            body = <View> {
+            body := View {
                 width: Fill,
                 height: Fit,
                 flow: Down,
                 spacing: 40,
 
-                prompt = <Label> {
+                prompt := Label {
                     width: Fill
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{
+                    draw_text +: {
+                        text_style: REGULAR_TEXT {
                             font_size: 11.5,
                         },
                         color: #000
-                        wrap: Word
+                        flow: Flow.Right{wrap: true}
                     }
                 }
 
-                <View> {
+                View {
                     width: Fill, height: Fit
                     flow: Right,
-                    align: {x: 1.0, y: 0.5}
+                    align: Align{x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button = <RobrixIconButton> {
-                        align: {x: 0.5, y: 0.5}
+                    cancel_button := RobrixIconButton {
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon: {
-                            svg_file: (ICON_FORBIDDEN)
+                        draw_icon +: {
+                            svg: (ICON_FORBIDDEN)
                             color: (COLOR_FG_DANGER_RED),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
         
-                        draw_bg: {
-                            border_color: (COLOR_FG_DANGER_RED),
-                            color: (COLOR_BG_DANGER_RED)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_DANGER_RED)),
+                            color: instance((COLOR_BG_DANGER_RED))
                         }
                         text: "Cancel"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_DANGER_RED),
                         }
                     }
 
-                    accept_button = <RobrixIconButton> {
-                        align: {x: 0.5, y: 0.5}
+                    accept_button := RobrixIconButton {
+                        align: Align{x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon: {
-                            svg_file: (ICON_CHECKMARK)
+                        draw_icon +: {
+                            svg: (ICON_CHECKMARK)
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
         
-                        draw_bg: {
-                            border_color: (COLOR_FG_ACCEPT_GREEN),
-                            color: (COLOR_BG_ACCEPT_GREEN)
+                        draw_bg +: {
+                            border_color: instance((COLOR_FG_ACCEPT_GREEN)),
+                            color: instance((COLOR_BG_ACCEPT_GREEN))
                         }
                         text: "Yes"
-                        draw_text:{
+                        draw_text +: {
                             color: (COLOR_FG_ACCEPT_GREEN),
                         }
                     }
@@ -111,7 +109,7 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook, Widget)]
+#[derive(Script, ScriptHook, Widget)]
 pub struct VerificationModal {
     #[deref] view: View,
     #[rust] state: Option<VerificationRequestActionState>,
@@ -140,8 +138,8 @@ impl Widget for VerificationModal {
 
 impl WidgetMatchEvent for VerificationModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let accept_button = self.button(ids!(accept_button));
-        let cancel_button = self.button(ids!(cancel_button));
+        let accept_button = self.button(cx, ids!(accept_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
 
         let cancel_button_clicked = cancel_button.clicked(actions);
         let modal_dismissed = actions
@@ -180,7 +178,7 @@ impl WidgetMatchEvent for VerificationModal {
             if let Some(verification_action) = action.downcast_ref::<VerificationAction>() {
                 match verification_action {
                     VerificationAction::RequestCancelled(cancel_info) => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             &format!("Verification request was cancelled: {}", cancel_info.reason())
                         );
@@ -191,7 +189,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestAccepted => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             "You successfully accepted the verification request.\n\n\
                             Waiting for the other device to agree on verification methods..."
@@ -204,7 +202,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestAcceptError(error) => {
-                        self.label(ids!(prompt)).set_text(cx, 
+                        self.label(cx, ids!(prompt)).set_text(cx, 
                             &format!(
                                 "Error accepting verification request: {}\n\n\
                                 Please try the verification process again.",
@@ -218,7 +216,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestCancelError(error) => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             &format!("Error cancelling verification request: {}.", error)
                         );
@@ -229,7 +227,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestTransitionedToUnsupportedMethod(method) => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             &format!(
                                 "Verification request transitioned to unsupported method: {}\n\nPlease try the verification process again.",
@@ -247,7 +245,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::SasAccepted(_accepted_protocols) => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             "Both sides have accepted the same verification method(s).\n\n\
                             Waiting for both devices to exchange keys..."
@@ -279,7 +277,7 @@ impl WidgetMatchEvent for VerificationModal {
                                 decimals.0, decimals.1, decimals.2,
                             )
                         };
-                        self.label(ids!(prompt)).set_text(cx, &text);
+                        self.label(cx, ids!(prompt)).set_text(cx, &text);
                         accept_button.set_enabled(cx, true);
                         accept_button.set_text(cx, "Yes");
                         cancel_button.set_text(cx, "No");
@@ -288,7 +286,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::SasConfirmed => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             "You successfully confirmed the Short Auth String keys.\n\n\
                             Waiting for the other device to confirm..."
@@ -301,7 +299,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::SasConfirmationError(error) => {
-                        self.label(ids!(prompt)).set_text(
+                        self.label(cx, ids!(prompt)).set_text(
                             cx,
                             &format!("Error confirming keys: {}\n\nPlease retry the verification process.", error)
                         );
@@ -312,7 +310,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestCompleted => {
-                        self.label(ids!(prompt)).set_text(cx, "Verification completed successfully!");
+                        self.label(cx, ids!(prompt)).set_text(cx, "Verification completed successfully!");
                         accept_button.set_text(cx, "Ok");
                         accept_button.set_enabled(cx, true);
                         cancel_button.set_visible(cx, false);
@@ -358,10 +356,10 @@ impl VerificationModal {
                 ).into()
             }
         };
-        self.label(ids!(prompt)).set_text(cx, &prompt_text);
+        self.label(cx, ids!(prompt)).set_text(cx, &prompt_text);
 
-        let accept_button = self.button(ids!(accept_button));
-        let cancel_button = self.button(ids!(cancel_button));
+        let accept_button = self.button(cx, ids!(accept_button));
+        let cancel_button = self.button(cx, ids!(cancel_button));
         accept_button.set_text(cx, "Yes");
         accept_button.set_enabled(cx, true);
         accept_button.set_visible(cx, true);