diff --git a/AGENTS.md b/AGENTS.md
deleted file mode 100644
index 9a393de6f..000000000
--- a/AGENTS.md
+++ /dev/null
@@ -1,732 +0,0 @@
-
-# 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 ff7277b67..c615b8cb7 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[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 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -230,15 +230,6 @@ 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"
@@ -491,7 +482,7 @@ dependencies = [
  "hyper-util",
  "itoa",
  "matchit",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "mime",
  "percent-encoding",
  "pin-project-lite",
@@ -569,7 +560,7 @@ version = "0.72.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "993776b509cfb49c750f11b8f07a46fa23e0a1386ffc01fb1e7d343efc387895"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "cexpr",
  "clang-sys",
  "itertools 0.13.0",
@@ -578,25 +569,16 @@ dependencies = [
  "proc-macro2",
  "quote",
  "regex",
- "rustc-hash 2.1.1",
+ "rustc-hash",
  "shlex",
  "syn 2.0.106",
 ]
 
 [[package]]
-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"
+name = "bitflags"
+version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e764a1d40d510daf35e07be9eb06e75770908c27d411ee6c92109c9840eaaf7"
+checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
 [[package]]
 name = "bitflags"
@@ -607,11 +589,6 @@ dependencies = [
  "serde_core",
 ]
 
-[[package]]
-name = "bitflags"
-version = "2.10.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "bitmaps"
 version = "3.2.1"
@@ -727,8 +704,9 @@ checksum = "46c5e41b57b8bba42a04676d81cb89e9ee8e859a1a66f80a5a72e1cb76b34d43"
 
 [[package]]
 name = "bytemuck"
-version = "1.25.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "1.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fbdf580320f38b612e485521afda1ee26d10cc9884efaaa750d383e13e3c5f4"
 
 [[package]]
 name = "byteorder"
@@ -736,11 +714,6 @@ 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "bytes"
 version = "1.11.1"
@@ -937,15 +910,6 @@ 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"
@@ -959,7 +923,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ba5a308b75df32fe02788e748662718f03fde005016435c444eea572398219fd"
 dependencies = [
  "bytes",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -970,7 +934,7 @@ checksum = "485abf41ac0c8047c07c87c72c8fb3eb5197f6e9d7ded615dfd1a00ae00a0f64"
 dependencies = [
  "compression-core",
  "flate2",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -1021,7 +985,7 @@ version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec182b0ca2f35d8fc196cf3404988fd8b8c739a4d270ff118a398feb0cbec1ca"
 dependencies = [
- "unicode-segmentation 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "unicode-segmentation",
 ]
 
 [[package]]
@@ -1056,7 +1020,7 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b49ba7ef1ad6107f8824dbe97de947cbaac53c44e7f9756a1fba0d37c1eec505"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -1273,6 +1237,12 @@ 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"
@@ -1468,7 +1438,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "objc2",
 ]
 
@@ -1483,6 +1453,15 @@ 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"
@@ -1605,7 +1584,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -1619,6 +1598,15 @@ 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"
@@ -1677,7 +1665,7 @@ dependencies = [
  "futures-core",
  "imbl",
  "pin-project-lite",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
 ]
 
 [[package]]
@@ -1710,6 +1698,15 @@ 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"
@@ -1742,6 +1739,12 @@ 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"
@@ -1918,7 +1921,7 @@ dependencies = [
  "futures-macro",
  "futures-sink",
  "futures-task",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "pin-project-lite",
  "pin-utils",
  "slab",
@@ -1936,9 +1939,10 @@ dependencies = [
 [[package]]
 name = "fxhash"
 version = "0.2.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c31b6d751ae2c7f11320402d34e41349dd1016f8d5d45e48c4312bc8625af50c"
 dependencies = [
- "byteorder 1.5.0 (git+https://github.com/makepad/makepad?branch=dev)",
+ "byteorder",
 ]
 
 [[package]]
@@ -2084,7 +2088,6 @@ checksum = "6ea2d84b969582b4b1864a92dc5d27cd2b77b622a8d79306834f1be5ba20d84b"
 dependencies = [
  "cfg-if",
  "crunchy",
- "num-traits",
  "zerocopy",
 ]
 
@@ -2167,12 +2170,6 @@ 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"
@@ -2244,7 +2241,7 @@ version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d347c0de239be20ba0982e4822de3124404281e119ae3e11f5d7425a414e1935"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "pastey",
 ]
 
@@ -2265,7 +2262,7 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "150fa4a9462ef926824cf4519c84ed652ca8f4fbae34cb8af045b5cbcaf98822"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -2330,7 +2327,7 @@ dependencies = [
  "itoa",
  "pin-project-lite",
  "pin-utils",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "tokio",
  "want",
 ]
@@ -2456,7 +2453,7 @@ dependencies = [
  "icu_normalizer_data",
  "icu_properties",
  "icu_provider",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "zerovec",
 ]
 
@@ -2518,7 +2515,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3b0875f23caa03898994f6ddc501886a45c7d3d62d04d2d90788d47be1b1e4de"
 dependencies = [
  "idna_adapter",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "utf8_iter",
 ]
 
@@ -2532,6 +2529,12 @@ 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"
@@ -2637,7 +2640,7 @@ version = "0.7.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dbc5ebe9c3a1a7a5127f920a418f7585e9e758e911d0466ed004f393b0e380b2"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "serde",
 ]
 
@@ -2772,6 +2775,17 @@ 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"
@@ -2815,7 +2829,7 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "416f7e718bdb06000964960ffa43b4335ad4012ae8b99060261aa4a8088d5ccb"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "libc",
  "redox_syscall",
 ]
@@ -2837,7 +2851,7 @@ version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f1dfa36d52c581e9ec783a7ce2a5e0143da6237be5811a0b3153fedfdbe9f780"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -2951,38 +2965,34 @@ dependencies = [
 ]
 
 [[package]]
-name = "makepad-apple-sys"
+name = "makepad-code-editor"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "makepad-objc-sys",
+ "makepad-widgets",
 ]
 
 [[package]]
-name = "makepad-byteorder-lite"
-version = "0.1.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
-[[package]]
-name = "makepad-code-editor"
-version = "2.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+name = "makepad-derive-live"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "makepad-widgets",
+ "makepad-live-id",
+ "makepad-micro-proc-macro",
 ]
 
 [[package]]
 name = "makepad-derive-wasm-bridge"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
 [[package]]
 name = "makepad-derive-widget"
-version = "2.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -2990,57 +3000,99 @@ dependencies = [
 
 [[package]]
 name = "makepad-draw"
-version = "2.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "ab_glyph_rasterizer",
  "fxhash",
+ "makepad-html",
  "makepad-live-id",
- "makepad-math",
  "makepad-platform",
- "makepad-svg",
- "makepad-webp",
- "makepad-zune-jpeg",
- "makepad-zune-png",
- "rustybuzz",
+ "makepad-rustybuzz",
+ "makepad-vector",
+ "png",
  "sdfer",
  "serde",
- "unicode-bidi 0.3.18 (git+https://github.com/makepad/makepad?branch=dev)",
+ "ttf-parser",
+ "unicode-bidi",
  "unicode-linebreak",
- "unicode-segmentation 1.12.0 (git+https://github.com/makepad/makepad?branch=dev)",
+ "unicode-segmentation",
 ]
 
 [[package]]
 name = "makepad-error-log"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-micro-serde",
 ]
 
 [[package]]
-name = "makepad-filesystem-watcher"
-version = "0.1.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+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",
+]
 
 [[package]]
 name = "makepad-futures"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[package]]
 name = "makepad-futures-legacy"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[package]]
 name = "makepad-html"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-live-id",
 ]
 
+[[package]]
+name = "makepad-http"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
+dependencies = [
+ "makepad-script",
+]
+
 [[package]]
 name = "makepad-jni-sys"
 version = "0.4.0"
@@ -3048,17 +3100,19 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9775cbec5fa0647500c3e5de7c850280a88335d1d2d770e5aa2332b801ba7064"
 
 [[package]]
-name = "makepad-latex-math"
-version = "0.1.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+name = "makepad-live-compiler"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "ttf-parser",
+ "makepad-derive-live",
+ "makepad-live-tokenizer",
+ "makepad-math",
 ]
 
 [[package]]
 name = "makepad-live-id"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-live-id-macros",
  "serde",
@@ -3067,23 +3121,25 @@ dependencies = [
 [[package]]
 name = "makepad-live-id-macros"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
 [[package]]
-name = "makepad-live-reload-core"
-version = "0.1.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+name = "makepad-live-tokenizer"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "makepad-filesystem-watcher",
+ "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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-micro-serde",
 ]
@@ -3091,12 +3147,12 @@ dependencies = [
 [[package]]
 name = "makepad-micro-proc-macro"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[package]]
 name = "makepad-micro-serde"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-serde-derive",
@@ -3105,187 +3161,153 @@ dependencies = [
 [[package]]
 name = "makepad-micro-serde-derive"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
-[[package]]
-name = "makepad-network"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "makepad-apple-sys",
- "makepad-error-log",
- "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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[package]]
 name = "makepad-platform"
-version = "2.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "ash",
- "bitflags 2.10.0 (git+https://github.com/makepad/makepad?branch=dev)",
+ "bitflags 2.10.0",
  "hilog-sys",
  "makepad-android-state",
- "makepad-apple-sys",
+ "makepad-error-log",
  "makepad-futures",
  "makepad-futures-legacy",
+ "makepad-http",
  "makepad-jni-sys",
- "makepad-live-reload-core",
- "makepad-network",
  "makepad-objc-sys",
- "makepad-script",
- "makepad-script-std",
- "makepad-shared-bytes",
- "makepad-studio-protocol",
+ "makepad-shader-compiler",
  "makepad-wasm-bridge",
- "makepad-zune-png",
- "naga",
  "napi-derive-ohos",
  "napi-ohos",
  "ohos-sys",
- "smallvec 1.15.1 (git+https://github.com/makepad/makepad?branch=dev)",
+ "smallvec",
  "wayland-client",
  "wayland-egl",
  "wayland-protocols",
- "windows 0.62.2",
- "windows-core 0.62.2",
+ "windows 0.56.0",
+ "windows-core 0.56.0",
  "windows-targets 0.52.6",
 ]
 
 [[package]]
-name = "makepad-regex"
-version = "0.1.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+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",
+]
 
 [[package]]
 name = "makepad-script"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-error-log",
- "makepad-html",
  "makepad-live-id",
  "makepad-math",
- "makepad-regex",
  "makepad-script-derive",
- "smallvec 1.15.1 (git+https://github.com/makepad/makepad?branch=dev)",
+ "smallvec",
 ]
 
 [[package]]
 name = "makepad-script-derive"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
 
 [[package]]
-name = "makepad-script-std"
+name = "makepad-shader-compiler"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "makepad-network",
- "makepad-script",
+ "makepad-live-compiler",
 ]
 
 [[package]]
-name = "makepad-shared-bytes"
-version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
-[[package]]
-name = "makepad-studio-protocol"
-version = "0.1.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "bitflags 2.10.0 (git+https://github.com/makepad/makepad?branch=dev)",
- "makepad-error-log",
- "makepad-live-id",
- "makepad-micro-serde",
- "makepad-script",
-]
+name = "makepad-ttf-parser"
+version = "0.21.1"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[package]]
-name = "makepad-svg"
+name = "makepad-vector"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "makepad-html",
- "makepad-live-id",
+ "makepad-ttf-parser",
+ "resvg",
 ]
 
 [[package]]
 name = "makepad-wasm-bridge"
 version = "1.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "makepad-byteorder-lite",
-]
-
 [[package]]
 name = "makepad-widgets"
-version = "2.0.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "1.0.0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 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-latex-math",
+ "makepad-zune-jpeg",
+ "makepad-zune-png",
  "pulldown-cmark 0.12.2",
  "serde",
- "ttf-parser",
- "unicode-segmentation 1.12.0 (git+https://github.com/makepad/makepad?branch=dev)",
+ "unicode-segmentation",
 ]
 
 [[package]]
 name = "makepad-zune-core"
-version = "0.5.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
-[[package]]
-name = "makepad-zune-inflate"
-version = "0.2.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.2.14"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "simd-adler32",
+ "bitflags 2.10.0",
 ]
 
 [[package]]
 name = "makepad-zune-jpeg"
-version = "0.5.12"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.3.17"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
  "makepad-zune-core",
 ]
 
 [[package]]
 name = "makepad-zune-png"
-version = "0.5.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.4.10"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 dependencies = [
- "makepad-zune-core",
- "makepad-zune-inflate",
+ "zune-core",
+ "zune-inflate",
 ]
 
 [[package]]
@@ -3420,7 +3442,7 @@ source = "git+https://github.com/matrix-org/matrix-rust-sdk?branch=main#d64c9906
 dependencies = [
  "as_variant",
  "async-trait",
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "decancer",
  "eyeball",
  "eyeball-im",
@@ -3473,7 +3495,7 @@ dependencies = [
  "as_variant",
  "async-trait",
  "bs58",
- "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "byteorder",
  "cfg-if",
  "ctr",
  "eyeball",
@@ -3590,7 +3612,7 @@ dependencies = [
  "async-rx",
  "async-stream",
  "async_cell",
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "chrono",
  "emojis",
  "eyeball",
@@ -3617,7 +3639,7 @@ dependencies = [
  "tokio-stream",
  "tracing",
  "unicode-normalization",
- "unicode-segmentation 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "unicode-segmentation",
 ]
 
 [[package]]
@@ -3637,7 +3659,7 @@ dependencies = [
  "sealed",
  "serde",
  "serde-wasm-bindgen",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "thiserror 2.0.17",
  "tokio",
  "wasm-bindgen",
@@ -3675,11 +3697,6 @@ 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "mime"
 version = "0.3.17"
@@ -3705,6 +3722,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
 dependencies = [
  "adler2",
+ "simd-adler32",
 ]
 
 [[package]]
@@ -3728,32 +3746,6 @@ 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"
@@ -3788,7 +3780,7 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad5a3bbb2ae61f345b8c11776f2e79fc2bb71d1901af9a5f81f03c9238a05d86"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "ctor",
  "napi-sys-ohos",
  "once_cell",
@@ -3838,7 +3830,7 @@ version = "7.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d273983c5a657a70a3e8f2a01329822f3b8c8172b73826411a55751e404a0a4a"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "minimal-lexical",
 ]
 
@@ -3863,7 +3855,7 @@ dependencies = [
  "num-iter",
  "num-traits",
  "rand 0.8.5",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "zeroize",
 ]
 
@@ -3948,7 +3940,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e6f29f568bec459b0ddff777cec4fe3fd8666d82d5a40ebd0ff7e66134f89bcc"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "objc2",
  "objc2-foundation",
 ]
@@ -3959,7 +3951,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1c10c2894a6fed806ade6027bcd50662746363a9589d3ec9d9bef30a4e4bc166"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "dispatch2",
  "objc2",
 ]
@@ -3986,7 +3978,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "900831247d2fe1a09a683278e5384cfb8c80c79fe6b166f9d14bfdde0ea1b03c"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "objc2",
  "objc2-core-foundation",
 ]
@@ -3997,7 +3989,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "25b1312ad7bc8a0e92adae17aa10f90aae1fb618832f9b993b022b591027daed"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "block2",
  "objc2",
  "objc2-foundation",
@@ -4033,7 +4025,7 @@ version = "0.10.75"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "08838db121398ad17ab8531ce9de97b244589089e290a384c900cb9ff7434328"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "cfg-if",
  "foreign-types",
  "libc",
@@ -4126,7 +4118,7 @@ dependencies = [
  "cfg-if",
  "libc",
  "redox_syscall",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "windows-targets 0.52.6",
 ]
 
@@ -4234,6 +4226,12 @@ 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"
@@ -4273,6 +4271,19 @@ 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"
@@ -4410,11 +4421,13 @@ dependencies = [
 [[package]]
 name = "pulldown-cmark"
 version = "0.12.2"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f86ba2052aebccc42cbbb3ed234b8b13ce76f75c3551a303cb2bcffcff12bb14"
 dependencies = [
- "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",
+ "bitflags 2.10.0",
+ "memchr",
+ "pulldown-cmark-escape",
+ "unicase",
 ]
 
 [[package]]
@@ -4423,10 +4436,10 @@ version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e8bbe1a966bd2f362681a44f6edce3c2310ac21e4d5067a6e7ec396297a6ea0"
 dependencies = [
- "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)",
+ "bitflags 2.10.0",
+ "memchr",
  "pulldown-cmark-escape",
- "unicase 2.8.1",
+ "unicase",
 ]
 
 [[package]]
@@ -4435,6 +4448,15 @@ 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"
@@ -4446,7 +4468,7 @@ dependencies = [
  "pin-project-lite",
  "quinn-proto",
  "quinn-udp",
- "rustc-hash 2.1.1",
+ "rustc-hash",
  "rustls",
  "socket2",
  "thiserror 2.0.17",
@@ -4467,7 +4489,7 @@ dependencies = [
  "lru-slab",
  "rand 0.9.2",
  "ring",
- "rustc-hash 2.1.1",
+ "rustc-hash",
  "rustls",
  "rustls-pki-types",
  "slab",
@@ -4601,7 +4623,7 @@ version = "0.5.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5407465600fb0548f1442edf71dd20683c6ed326200ace4b1ef0763521bb3b77"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
 ]
 
 [[package]]
@@ -4642,7 +4664,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "843bc0191f75f3e22651ae5f1e72939ab2f72a4bc30fa80a066bd66edefc24d4"
 dependencies = [
  "aho-corasick",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "regex-automata",
  "regex-syntax",
 ]
@@ -4654,7 +4676,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5276caf25ac86c8d810222b3dbb938e512c55c6831a10f3e6ed1c93b84041f1c"
 dependencies = [
  "aho-corasick",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "regex-syntax",
 ]
 
@@ -4712,6 +4734,20 @@ 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"
@@ -4722,6 +4758,15 @@ 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"
@@ -4742,7 +4787,7 @@ version = "0.8.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "228ed7c16fa39782c3b3468e974aec2795e9089153cd08ee2e9aefb3613334c4"
 dependencies = [
- "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "byteorder",
  "num-traits",
  "paste",
 ]
@@ -4753,7 +4798,7 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "52e599a477cf9840e92f2cde9a7189e67b42c57532749bf90aea6ec10facd4db"
 dependencies = [
- "byteorder 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "byteorder",
  "rmp",
  "serde",
 ]
@@ -4826,7 +4871,7 @@ version = "0.0.1-pre-alpha-4"
 dependencies = [
  "anyhow",
  "aws-lc-rs",
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "blurhash",
  "bytesize",
  "chrono",
@@ -4864,10 +4909,16 @@ dependencies = [
  "tokio",
  "tracing-subscriber",
  "tsp_sdk",
- "unicode-segmentation 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "unicode-segmentation",
  "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"
@@ -5062,20 +5113,14 @@ version = "0.37.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "165ca6e57b20e1351573e3729b958bc62f0e48025386970b6e4d29e7a7e71f3f"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "fallible-iterator",
  "fallible-streaming-iterator",
  "hashlink",
  "libsqlite3-sys",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
 ]
 
-[[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"
@@ -5097,11 +5142,11 @@ version = "1.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cd15f8a2c5551a84d56efdc1cd049089e409ac19a3072d5037a17fd70719ff3e"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "errno",
  "libc",
  "linux-raw-sys",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -5169,22 +5214,6 @@ 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-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"
@@ -5272,7 +5301,7 @@ checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 [[package]]
 name = "sdfer"
 version = "0.2.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "git+https://github.com/makepad/makepad?branch=dev#2898fb1367a95385df79141cd765bf8cf0719b8d"
 
 [[package]]
 name = "sealed"
@@ -5304,7 +5333,7 @@ version = "2.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "core-foundation 0.9.4",
  "core-foundation-sys",
  "libc",
@@ -5317,7 +5346,7 @@ version = "3.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cc198e42d9b7510827939c9a15f5062a0c913f3371d765977e586d2fe6c16f4a"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "core-foundation 0.10.1",
  "core-foundation-sys",
  "libc",
@@ -5420,7 +5449,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
 dependencies = [
  "itoa",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "serde",
  "serde_core",
  "zmij",
@@ -5570,8 +5599,18 @@ dependencies = [
 
 [[package]]
 name = "simd-adler32"
-version = "0.3.8"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+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",
+]
 
 [[package]]
 name = "siphasher"
@@ -5594,11 +5633,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "smallvec"
-version = "1.15.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "socket2"
 version = "0.6.0"
@@ -5618,15 +5652,6 @@ 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"
@@ -5669,13 +5694,13 @@ dependencies = [
  "hashlink",
  "indexmap 2.13.0",
  "log",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "once_cell",
  "percent-encoding",
  "serde",
  "serde_json",
  "sha2 0.10.9",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "thiserror 2.0.17",
  "tokio",
  "tokio-stream",
@@ -5726,8 +5751,8 @@ source = "git+https://github.com/project-robius/sqlx.git?branch=update_libsqlite
 dependencies = [
  "atoi",
  "base64",
- "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)",
+ "bitflags 2.10.0",
+ "byteorder",
  "bytes",
  "chrono",
  "crc",
@@ -5745,7 +5770,7 @@ dependencies = [
  "itoa",
  "log",
  "md-5",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "once_cell",
  "percent-encoding",
  "rand 0.8.5",
@@ -5753,7 +5778,7 @@ dependencies = [
  "serde",
  "sha1",
  "sha2 0.10.9",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "sqlx-core",
  "stringprep",
  "thiserror 2.0.17",
@@ -5768,8 +5793,8 @@ source = "git+https://github.com/project-robius/sqlx.git?branch=update_libsqlite
 dependencies = [
  "atoi",
  "base64",
- "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)",
+ "bitflags 2.10.0",
+ "byteorder",
  "chrono",
  "crc",
  "dotenvy",
@@ -5784,13 +5809,13 @@ dependencies = [
  "itoa",
  "log",
  "md-5",
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
  "once_cell",
  "rand 0.8.5",
  "serde",
  "serde_json",
  "sha2 0.10.9",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "sqlx-core",
  "stringprep",
  "thiserror 2.0.17",
@@ -5828,6 +5853,15 @@ 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"
@@ -5859,9 +5893,9 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7b4df3d392d81bd458a8a621b8bffbd2302a12ffe288a9d931670948749463b1"
 dependencies = [
- "unicode-bidi 0.3.18 (registry+https://github.com/rust-lang/crates.io-index)",
+ "unicode-bidi",
  "unicode-normalization",
- "unicode-properties 0.1.3",
+ "unicode-properties",
 ]
 
 [[package]]
@@ -5876,6 +5910,16 @@ 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"
@@ -5924,7 +5968,7 @@ version = "0.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3c879d448e9d986b661742763247d3693ed13609438cf3d006f51f5368a5ba6b"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "core-foundation 0.9.4",
  "system-configuration-sys",
 ]
@@ -5949,7 +5993,7 @@ dependencies = [
  "getrandom 0.3.3",
  "once_cell",
  "rustix",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -6043,6 +6087,32 @@ 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"
@@ -6222,7 +6292,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
 dependencies = [
  "async-compression",
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "bytes",
  "futures-core",
  "futures-util",
@@ -6305,7 +6375,7 @@ dependencies = [
  "once_cell",
  "regex-automata",
  "sharded-slab",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "thread_local",
  "tracing",
  "tracing-core",
@@ -6362,8 +6432,9 @@ dependencies = [
 
 [[package]]
 name = "ttf-parser"
-version = "0.24.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.25.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d2df906b07856748fa3f6e0ad0cbaa047052d4a7dd609e231c4f72cee8c36f31"
 
 [[package]]
 name = "tungstenite"
@@ -6421,31 +6492,23 @@ 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "unicode-bidi-mirroring"
-version = "0.3.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56d12260fb92d52f9008be7e4bca09f584780eb2266dc8fecc6a192bec561694"
 
 [[package]]
 name = "unicode-ccc"
-version = "0.3.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc2520efa644f8268dce4dcd3050eaa7fc044fca03961e9998ac7e2e92b77cf1"
 
 [[package]]
 name = "unicode-ident"
@@ -6456,7 +6519,8 @@ checksum = "f63a545481291138910575129486daeaf8ac54aee4387fe7906919f7830c7d9d"
 [[package]]
 name = "unicode-linebreak"
 version = "0.1.5"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b09c83c3c29d37506a3e260c08c03743a6bb66a9cd432c6934ab501a190571f"
 
 [[package]]
 name = "unicode-normalization"
@@ -6473,32 +6537,17 @@ 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "unicode-script"
-version = "0.5.8"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
-[[package]]
-name = "unicode-segmentation"
-version = "1.12.0"
+version = "0.5.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
+checksum = "9fb421b350c9aff471779e262955939f565ec18b86c15364e6bdf0d662ca7c1f"
 
 [[package]]
 name = "unicode-segmentation"
 version = "1.12.0"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
-[[package]]
-name = "unicode-width"
-version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
+checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
 
 [[package]]
 name = "unicode-xid"
@@ -6552,6 +6601,28 @@ 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"
@@ -6763,7 +6834,7 @@ dependencies = [
  "fancy_constructor",
  "futures-core",
  "js-sys",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "tokio",
  "wasm-bindgen",
  "web-sys",
@@ -6771,30 +6842,35 @@ dependencies = [
 
 [[package]]
 name = "wayland-backend"
-version = "0.3.12"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "673a33c33048a5ade91a6b139580fa174e19fb0d23f396dca9fa15f2e1e49b35"
 dependencies = [
+ "cc",
  "downcast-rs",
- "libc",
+ "rustix",
  "scoped-tls",
- "smallvec 1.15.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "smallvec",
  "wayland-sys",
 ]
 
 [[package]]
 name = "wayland-client"
-version = "0.31.12"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.31.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c66a47e840dc20793f2264eb4b3e4ecb4b75d91c0dd4af04b456128e0bdd449d"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "libc",
+ "bitflags 2.10.0",
+ "rustix",
  "wayland-backend",
+ "wayland-scanner",
 ]
 
 [[package]]
 name = "wayland-egl"
-version = "0.32.9"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.32.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d36232ee23ba3ea34a6835d68ca1af91d3ca3d6eddcf9c7147c4e0e66901b9fd"
 dependencies = [
  "wayland-backend",
  "wayland-sys",
@@ -6802,19 +6878,34 @@ dependencies = [
 
 [[package]]
 name = "wayland-protocols"
-version = "0.32.10"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.32.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "efa790ed75fbfd71283bd2521a1cfdc022aabcc28bdcff00851f9e4ae88d9901"
 dependencies = [
- "bitflags 2.10.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 2.10.0",
  "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.8"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
+version = "0.31.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34949b42822155826b41db8e5d0c1be3a2bd296c747577a43a3e6daefc296142"
 dependencies = [
+ "dlib",
  "log",
  "pkg-config",
 ]
@@ -6902,23 +6993,13 @@ version = "0.61.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
 dependencies = [
- "windows-collections 0.2.0",
+ "windows-collections",
  "windows-core 0.61.2",
- "windows-future 0.2.1",
+ "windows-future",
  "windows-link 0.1.3",
  "windows-numerics",
 ]
 
-[[package]]
-name = "windows"
-version = "0.62.2"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "windows-collections 0.3.2",
- "windows-core 0.62.2",
- "windows-future 0.3.2",
-]
-
 [[package]]
 name = "windows-collections"
 version = "0.2.0"
@@ -6928,14 +7009,6 @@ dependencies = [
  "windows-core 0.61.2",
 ]
 
-[[package]]
-name = "windows-collections"
-version = "0.3.2"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "windows-core 0.62.2",
-]
-
 [[package]]
 name = "windows-core"
 version = "0.56.0"
@@ -6958,17 +7031,7 @@ dependencies = [
  "windows-interface 0.59.2",
  "windows-link 0.1.3",
  "windows-result 0.3.4",
- "windows-strings 0.4.2",
-]
-
-[[package]]
-name = "windows-core"
-version = "0.62.2"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "windows-link 0.2.1",
- "windows-result 0.4.1",
- "windows-strings 0.5.1",
+ "windows-strings",
 ]
 
 [[package]]
@@ -6982,14 +7045,6 @@ dependencies = [
  "windows-threading",
 ]
 
-[[package]]
-name = "windows-future"
-version = "0.3.2"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "windows-core 0.62.2",
-]
-
 [[package]]
 name = "windows-implement"
 version = "0.56.0"
@@ -7046,11 +7101,6 @@ 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#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-
 [[package]]
 name = "windows-numerics"
 version = "0.2.0"
@@ -7069,7 +7119,7 @@ checksum = "5b8a9ed28765efc97bbc954883f4e6796c33a06546ebafacbabee9696967499e"
 dependencies = [
  "windows-link 0.1.3",
  "windows-result 0.3.4",
- "windows-strings 0.4.2",
+ "windows-strings",
 ]
 
 [[package]]
@@ -7090,14 +7140,6 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
-[[package]]
-name = "windows-result"
-version = "0.4.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "windows-link 0.2.1",
-]
-
 [[package]]
 name = "windows-strings"
 version = "0.4.2"
@@ -7107,14 +7149,6 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
-[[package]]
-name = "windows-strings"
-version = "0.5.1"
-source = "git+https://github.com/makepad/makepad?branch=dev#84ec5394bab142fc58431d5ef7bdff65ac03feb0"
-dependencies = [
- "windows-link 0.2.1",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.45.0"
@@ -7427,7 +7461,7 @@ version = "0.7.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "21a0236b59786fed61e2a80582dd500fe61f18b5dca67a4a067d0bc9039339cf"
 dependencies = [
- "memchr 2.7.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr",
 ]
 
 [[package]]
@@ -7454,6 +7488,12 @@ 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"
@@ -7583,3 +7623,18 @@ 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 505f9d570..770905156 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,14 +1,17 @@
 [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="
@@ -18,7 +21,6 @@ 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" }
@@ -34,9 +36,9 @@ 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"
@@ -44,27 +46,14 @@ 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"
@@ -81,10 +70,7 @@ 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.
@@ -151,7 +137,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]
@@ -185,15 +171,13 @@ 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"
@@ -237,10 +221,7 @@ 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]
@@ -250,10 +231,10 @@ 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: GOSIM FOUNDATION LTD. (HMX6XGJZ3R)"
+signing_identity = "Developer ID Application: AppChef Inc. (SFVQ5V48GD)"
 
 
 ## Configuration for `cargo packager`'s generation of a macOS `.dmg`.
diff --git a/SPLASH.md b/SPLASH.md
deleted file mode 100644
index 88af44bba..000000000
--- a/SPLASH.md
+++ /dev/null
@@ -1,2362 +0,0 @@
-# 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 a685692b8..52f7f3ff4 100644
--- a/resources/icons/search.svg
+++ b/resources/icons/search.svg
@@ -1,3 +1,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"/>
+<?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>
diff --git a/resources/icons/settings.svg b/resources/icons/settings.svg
index f047ec0cd..302f3e489 100644
--- a/resources/icons/settings.svg
+++ b/resources/icons/settings.svg
@@ -1,3 +1,12 @@
-<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>
+<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
diff --git a/resources/icons/triangle_down_fill.svg b/resources/icons/triangle_down_fill.svg
deleted file mode 100644
index 70710b89b..000000000
--- a/resources/icons/triangle_down_fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767z" transform="rotate(180 8 8)"/>
-</svg>
diff --git a/resources/icons/triangle_up_fill.svg b/resources/icons/triangle_fill.svg
similarity index 100%
rename from resources/icons/triangle_up_fill.svg
rename to resources/icons/triangle_fill.svg
diff --git a/resources/img/default_avatar.png b/resources/img/default_avatar.png
new file mode 100644
index 000000000..bbd4fc661
Binary files /dev/null and b/resources/img/default_avatar.png differ
diff --git a/src/app.rs b/src/app.rs
index 6066b3f9b..4c0a4a54f 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -11,33 +11,53 @@ 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::{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::{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::{
         VerificationModalAction,
         VerificationModalWidgetRefExt,
     }
 };
 
-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 +: {
-                    draw_bg.color: #F3F3F3
-                    caption_label +: {
-                        label +: {
-                            align: Align{x: 0.5},
-                            draw_text +: { color: #0 }
-                            text: "Robrix"
+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)}
                         }
                     }
-                    windows_buttons +: {
-                         // Note: these are the background colors of the buttons used in Windows:
+                    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).
@@ -46,113 +66,116 @@ script_mod! {
                         // 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} }
+                        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: (ICON_INVITE) }
-                                        icon_walk: Walk{width: 28, height: Fit, margin: Inset{left: -10, right: 2} }
+                        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} }
                                     } } }
                                 }
                             }
                         }
 
                         // 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: Align{x: 0.5, y: 0.5},
-                                event_source_modal_inner := EventSourceModal {}
+                                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
             }
@@ -162,7 +185,7 @@ script_mod! {
 
 app_main!(App);
 
-#[derive(Script)]
+#[derive(Live)]
 pub struct App {
     #[live] ui: WidgetRef,
     /// The top-level app state, shared across various parts of the app.
@@ -173,19 +196,52 @@ pub struct App {
     #[rust] waiting_to_navigate_to_room: Option<(BasicRoomDetails, Option<OwnedRoomId>)>,
 }
 
-impl ScriptHook for App {
-    /// After a hot-reload update, refresh the login/home screen visibility.
-    fn on_after_reload(&mut self, vm: &mut ScriptVm) {
-        vm.with_cx_mut(|cx| {
-            self.update_login_visibility(cx);
-        });
+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);
     }
 
-    /// After initial creation, set the global singleton for the PopupList widget.
-    fn on_after_new(&mut self, vm: &mut ScriptVm) {
-        vm.with_cx_mut(|cx| {
-            crate::shared::popup_list::set_global_popup_list(cx, &self.ui);
-        });
+    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);
     }
 }
 
@@ -212,19 +268,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(cx, ids!(main_window)), cx) {
+        if let Err(e) = persistence::load_window_state(self.ui.window(ids!(main_window)), cx) {
             error!("Failed to load window state: {}", e);
         }
 
-        // Hide the caption bar on macOS, which uses native window chrome.
-        // On Windows (and Linux with custom chrome), the caption bar is needed.
-        if let OsType::Macos = cx.os_type() {
-            let mut window = self.ui.window(cx, ids!(main_window));
-            script_apply_eval!(cx, window, {
-                show_caption_bar: false
-            });
-        }
-
         self.update_login_visibility(cx);
 
         log!("App::Startup: starting matrix sdk loop");
@@ -237,31 +284,31 @@ impl MatchEvent for App {
     }
 
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let invite_confirmation_modal_inner = self.ui.confirmation_modal(cx, ids!(invite_confirmation_modal_inner));
+        let invite_confirmation_modal_inner = self.ui.confirmation_modal(ids!(invite_confirmation_modal_inner));
         if let Some(_accepted) = invite_confirmation_modal_inner.closed(actions) {
-            self.ui.modal(cx, ids!(invite_confirmation_modal)).close(cx);
+            self.ui.modal(ids!(invite_confirmation_modal)).close(cx);
         }
 
-        let delete_confirmation_modal_inner = self.ui.confirmation_modal(cx, ids!(delete_confirmation_modal_inner));
+        let delete_confirmation_modal_inner = self.ui.confirmation_modal(ids!(delete_confirmation_modal_inner));
         if let Some(_accepted) = delete_confirmation_modal_inner.closed(actions) {
-            self.ui.modal(cx, ids!(delete_confirmation_modal)).close(cx);
+            self.ui.modal(ids!(delete_confirmation_modal)).close(cx);
         }
 
-        let positive_confirmation_modal_inner = self.ui.confirmation_modal(cx, ids!(positive_confirmation_modal_inner));
+        let positive_confirmation_modal_inner = self.ui.confirmation_modal(ids!(positive_confirmation_modal_inner));
         if let Some(_accepted) = positive_confirmation_modal_inner.closed(actions) {
-            self.ui.modal(cx, ids!(positive_confirmation_modal)).close(cx);
+            self.ui.modal(ids!(positive_confirmation_modal)).close(cx);
         }
 
         for action in actions {
             match action.downcast_ref() {
                 Some(LogoutConfirmModalAction::Open) => {
-                    self.ui.logout_confirm_modal(cx, ids!(logout_confirm_modal_inner)).reset_state(cx);
-                    self.ui.modal(cx, ids!(logout_confirm_modal)).open(cx);
+                    self.ui.logout_confirm_modal(ids!(logout_confirm_modal_inner)).reset_state(cx);
+                    self.ui.modal(ids!(logout_confirm_modal)).open(cx);
                     continue;
                 },
                 Some(LogoutConfirmModalAction::Close { was_internal, .. }) => {
                     if *was_internal {
-                        self.ui.modal(cx, ids!(logout_confirm_modal)).close(cx);
+                        self.ui.modal(ids!(logout_confirm_modal)).close(cx);
                     }
                     continue;
                 },
@@ -271,7 +318,7 @@ impl MatchEvent for App {
             match action.downcast_ref() {
                 Some(LogoutAction::LogoutSuccess) => {
                     self.app_state.logged_in = false;
-                    self.ui.modal(cx, ids!(logout_confirm_modal)).close(cx);
+                    self.ui.modal(ids!(logout_confirm_modal)).close(cx);
                     self.update_login_visibility(cx);
                     self.ui.redraw(cx);
                     continue;
@@ -295,37 +342,17 @@ impl MatchEvent for App {
                 continue;
             }
 
-            // If a login failure occurs mid-session (e.g., an expired/revoked token detected
-            // by `handle_session_changes`), navigate back to the login screen.
-            // When not yet logged in, the login_screen widget handles displaying the failure modal.
-            if let Some(LoginAction::LoginFailure(_)) = action.downcast_ref() {
-                if self.app_state.logged_in {
-                    log!("Received LoginAction::LoginFailure while logged in; showing login screen.");
-                    self.app_state.logged_in = false;
-                    self.update_login_visibility(cx);
-                    self.ui.redraw(cx);
-                }
-                continue;
-            }
-
             // 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(cx, ids!(app_tooltip)).hide(cx);
-                let new_message_context_menu = self.ui.new_message_context_menu(cx, ids!(new_message_context_menu));
+                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));
                 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(cx, ids!(main_window)).area().rect(cx);
+                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 margin = Inset {
-                    left: pos_x as f64,
-                    top: pos_y as f64,
-                    right: 0.0,
-                    bottom: 0.0,
-                };
-                let mut main_content_view = new_message_context_menu.view(cx, ids!(main_content));
-                script_apply_eval!(cx, main_content_view, {
-                    margin: #(margin)
+                new_message_context_menu.apply_over(cx, live! {
+                    main_content = { margin: { left: (pos_x), top: (pos_y) } }
                 });
                 self.ui.redraw(cx);
                 continue;
@@ -333,22 +360,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(cx, ids!(app_tooltip)).hide(cx);
-                let room_context_menu = self.ui.room_context_menu(cx, ids!(room_context_menu));
+                self.ui.callout_tooltip(ids!(app_tooltip)).hide(cx);
+                let room_context_menu = self.ui.room_context_menu(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(cx, ids!(main_window)).area().rect(cx);
+                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 margin = Inset {
-                    left: pos_x as f64,
-                    top: pos_y as f64,
-                    right: 0.0,
-                    bottom: 0.0,
-                };
-                let mut main_content_view = room_context_menu.view(cx, ids!(main_content));
-                script_apply_eval!(cx, main_content_view, {
-                    margin: #(margin)
+                room_context_menu.apply_over(cx, live! {
+                    main_content = { margin: { left: (pos_x), top: (pos_y) } }
                 });
                 self.ui.redraw(cx);
                 continue;
@@ -358,14 +378,15 @@ 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(cx, ids!(main_content_view.header.content.title_container.title))
+                    .label(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(), 
+                    self.ui.widget_uid(),
+                    &HeapLiveIdPath::default(),
                     StackNavigationAction::Push(id!(main_content_view))
                 );
                 self.ui.redraw(cx);
@@ -424,11 +445,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(cx, ids!(new_message_context_menu)).is_currently_shown(cx) {
-                        self.ui.callout_tooltip(cx, ids!(app_tooltip)).hide(cx);
+                    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);
                     }
                     else {
-                        self.ui.callout_tooltip(cx, ids!(app_tooltip)).show_with_options(
+                        self.ui.callout_tooltip(ids!(app_tooltip)).show_with_options(
                             cx,
                             &text,
                             widget_rect,
@@ -438,7 +459,7 @@ impl MatchEvent for App {
                     continue;
                 }
                 TooltipAction::HoverOut => {
-                    self.ui.callout_tooltip(cx, ids!(app_tooltip)).hide(cx);
+                    self.ui.callout_tooltip(ids!(app_tooltip)).hide(cx);
                     continue;
                 }
                 _ => {}
@@ -448,14 +469,14 @@ impl MatchEvent for App {
             match action.downcast_ref() {
                 Some(JoinLeaveRoomModalAction::Open { kind, show_tip }) => {
                     self.ui
-                        .join_leave_room_modal(cx, ids!(join_leave_modal_inner))
+                        .join_leave_room_modal(ids!(join_leave_modal_inner))
                         .set_kind(cx, kind.clone(), *show_tip);
-                    self.ui.modal(cx, ids!(join_leave_modal)).open(cx);
+                    self.ui.modal(ids!(join_leave_modal)).open(cx);
                     continue;
                 }
                 Some(JoinLeaveRoomModalAction::Close { was_internal, .. }) => {
                     if *was_internal {
-                        self.ui.modal(cx, ids!(join_leave_modal)).close(cx);
+                        self.ui.modal(ids!(join_leave_modal)).close(cx);
                     }
                     continue;
                 }
@@ -467,22 +488,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(cx, ids!(verification_modal_inner))
+                self.ui.verification_modal(ids!(verification_modal_inner))
                     .initialize_with_data(cx, state.clone());
-                self.ui.modal(cx, ids!(verification_modal)).open(cx);
+                self.ui.modal(ids!(verification_modal)).open(cx);
                 continue;
             }
             if let Some(VerificationModalAction::Close) = action.downcast_ref() {
-                self.ui.modal(cx, ids!(verification_modal)).close(cx);
+                self.ui.modal(ids!(verification_modal)).close(cx);
                 continue;
             }
             match action.downcast_ref() {
                 Some(ImageViewerAction::Show(LoadState::Loading(_, _))) => {
-                    self.ui.modal(cx, ids!(image_viewer_modal)).open(cx);
+                    self.ui.modal(ids!(image_viewer_modal)).open(cx);
                     continue;
                 }
                 Some(ImageViewerAction::Hide) => {
-                    self.ui.modal(cx, ids!(image_viewer_modal)).close(cx);
+                    self.ui.modal(ids!(image_viewer_modal)).close(cx);
                     continue;
                 }
                 _ => {}
@@ -493,13 +514,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(cx, ids!(tsp_verification_modal_inner))
+                    self.ui.tsp_verification_modal(ids!(tsp_verification_modal_inner))
                         .initialize_with_details(cx, details.clone(), wallet_db.deref().clone());
-                    self.ui.modal(cx, ids!(tsp_verification_modal)).open(cx);
+                    self.ui.modal(ids!(tsp_verification_modal)).open(cx);
                     continue;
                 }
                 if let Some(TspVerificationModalAction::Close) = action.downcast_ref() {
-                    self.ui.modal(cx, ids!(tsp_verification_modal)).close(cx);
+                    self.ui.modal(ids!(tsp_verification_modal)).close(cx);
                     continue;
                 }
             }
@@ -508,7 +529,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(cx, ids!(invite_confirmation_modal)).open(cx);
+                    self.ui.modal(ids!(invite_confirmation_modal)).open(cx);
                 }
                 continue;
             }
@@ -517,7 +538,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(cx, ids!(positive_confirmation_modal)).open(cx);
+                    self.ui.modal(ids!(positive_confirmation_modal)).open(cx);
                 }
                 continue;
             }
@@ -525,8 +546,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(cx, ids!(delete_confirmation_modal_inner)).show(cx, content);
-                    self.ui.modal(cx, ids!(delete_confirmation_modal)).open(cx);
+                    self.ui.confirmation_modal(ids!(delete_confirmation_modal_inner)).show(cx, content);
+                    self.ui.modal(ids!(delete_confirmation_modal)).open(cx);
                 }
                 continue;
             }
@@ -534,12 +555,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(cx, ids!(invite_modal_inner)).show(cx, room_name_id.clone());
-                    self.ui.modal(cx, ids!(invite_modal)).open(cx); 
+                    self.ui.invite_modal(ids!(invite_modal_inner)).show(cx, room_name_id.clone());
+                    self.ui.modal(ids!(invite_modal)).open(cx);
                     continue;
                 }
                 Some(InviteModalAction::Close) => {
-                    self.ui.modal(cx, ids!(invite_modal)).close(cx);
+                    self.ui.modal(ids!(invite_modal)).close(cx);
                     continue;
                 }
                 _ => {}
@@ -548,13 +569,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(cx, ids!(event_source_modal_inner))
+                    self.ui.event_source_modal(ids!(event_source_modal_inner))
                         .show(cx, room_id.clone(), event_id.clone(), original_json.clone());
-                    self.ui.modal(cx, ids!(event_source_modal)).open(cx);
+                    self.ui.modal(ids!(event_source_modal)).open(cx);
                     continue;
                 }
                 Some(EventSourceModalAction::Close) => {
-                    self.ui.modal(cx, ids!(event_source_modal)).close(cx);
+                    self.ui.modal(ids!(event_source_modal)).close(cx);
                     continue;
                 }
                 _ => {}
@@ -600,7 +621,7 @@ impl MatchEvent for App {
                             ..Default::default()
                         },
                     );
-                    self.ui.modal(cx, ids!(positive_confirmation_modal)).open(cx);
+                    self.ui.modal(ids!(positive_confirmation_modal)).open(cx);
                 }
                 Some(DirectMessageRoomAction::FailedToCreate { user_profile, error }) => {
                     enqueue_popup_notification(
@@ -628,40 +649,9 @@ fn clear_all_app_state(cx: &mut Cx) {
 }
 
 impl AppMain for App {
-    fn script_mod(vm: &mut ScriptVm) -> makepad_widgets::ScriptValue {
-        // Order matters: base widgets first, then app widgets, then app UI.
-        makepad_widgets::theme_mod(vm);
-        // script_eval!(vm, {
-        //     mod.theme = mod.themes.light
-        // });
-        makepad_widgets::widgets_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);
-
-        self::script_mod(vm)
-    }
-
     fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
         if let Event::Shutdown = event {
-            let window_ref = self.ui.window(cx, ids!(main_window));
+            let window_ref = self.ui.window(ids!(main_window));
             if let Err(e) = persistence::save_window_state(window_ref, cx) {
                 error!("Failed to save window state. Error: {e}");
             }
@@ -711,7 +701,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(cx, ids!(new_message_context_menu));
+        let new_message_context_menu = self.ui.new_message_context_menu(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) {
@@ -736,11 +726,11 @@ impl App {
         let show_login = !self.app_state.logged_in;
         if !show_login {
             self.ui
-                .modal(cx, ids!(login_screen_view.login_screen.login_status_modal))
+                .modal(ids!(login_screen_view.login_screen.login_status_modal))
                 .close(cx);
         }
-        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);
+        self.ui.view(ids!(login_screen_view)).set_visible(cx, show_login);
+        self.ui.view(ids!(home_screen_view)).set_visible(cx, !show_login);
     }
 
     /// Navigates to the given `destination_room`, optionally closing the `room_to_close`.
@@ -756,7 +746,8 @@ impl App {
             let widget_uid = self.ui.widget_uid();
             move |cx: &mut Cx| {
                 cx.widget_action(
-                    widget_uid, 
+                    widget_uid,
+                    &HeapLiveIdPath::default(),
                     DockAction::TabCloseWasPressed(tab_id),
                 );
                 enqueue_rooms_list_update(RoomsListUpdate::HideRoom { room_id: to_close.clone() });
@@ -764,8 +755,7 @@ impl App {
         });
 
         let destination_room_id = destination_room.room_id();
-        let room_state = cx.get_global::<RoomsListRef>().get_room_state(destination_room_id);
-        let new_selected_room = match room_state {
+        let new_selected_room = match cx.get_global::<RoomsListRef>().get_room_state(destination_room_id) {
             Some(RoomState::Joined) => SelectedRoom::JoinedRoom {
                 room_name_id: destination_room.room_name_id().clone(),
             },
@@ -802,7 +792,8 @@ impl App {
             cx.action(NavigationBarAction::GoToHome);
         }
         cx.widget_action(
-            self.ui.widget_uid(), 
+            self.ui.widget_uid(),
+            &HeapLiveIdPath::default(),
             RoomsListAction::Selected(new_selected_room),
         );
         // Select and scroll to the destination room in the rooms list.
diff --git a/src/home/add_room.rs b/src/home/add_room.rs
index 981369897..65c138639 100644
--- a/src/home/add_room.rs
+++ b/src/home/add_room.rs
@@ -7,42 +7,52 @@ 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};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::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.
-    mod.widgets.AddRoomScreen = #(AddRoomScreen::register_widget(vm)) {
-        ..mod.widgets.ScrollYView
-
+    pub AddRoomScreen = {{AddRoomScreen}}<ScrollXYView> {
         width: Fill, height: Fill,
         flow: Down,
-        padding: Inset{top: 5, left: 15, right: 15, bottom: 0},
+        padding: {top: 5, left: 15, right: 15, bottom: 0},
+
+        // show_bg: true
+        // draw_bg: {
+        //     color: (COLOR_PRIMARY)
+        // }
 
-        title := TitleLabel {
-            flow: Flow.Right{wrap: true},
-            draw_text +: {
-                text_style: TITLE_TEXT {font_size: 13},
+        title = <TitleLabel> {
+            flow: RightWrap,
+            draw_text: {
+                text_style: <TITLE_TEXT>{font_size: 13},
                 color: #000
+                wrap: Word
             }
             text: "Add/Explore Rooms and Spaces"
-            draw_text +: {
-                text_style: theme.font_regular {font_size: 18},
+            draw_text: {
+                text_style: {font_size: 18},
             }
         }
         
-        LineH { padding: 10, margin: Inset{top: 10, right: 2} }
+        <LineH> { padding: 10, margin: {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.
@@ -56,84 +66,94 @@ script_mod! {
             "
         }
 
-        join_room_view := View {
+        join_room_view = <View> {
             width: Fill,
             height: Fit,
-            margin: Inset{ top: 3, bottom: 4 }
-            align: Align{y: 0.5}
+            margin: { top: 3 }
+            align: {y: 0.5}
             spacing: 5
             flow: Right
 
-            room_alias_id_input := RobrixTextInput {
-                align: Align{y: 0.5}
-                margin: Inset{top: 0, left: 5, right: 5, bottom: 0},
-                padding: Inset{left: 12, right: 12, top: 11, bottom: 0}
+            room_alias_id_input = <SimpleTextInput> {
+                margin: {top: 0, left: 5, right: 5, bottom: 0},
                 width: Fill { max: 400 } // same width as the above `help_info`
-                height: 40
+                height: Fit
                 empty_text: "Enter alias, ID, or Matrix link..."
             }
 
-            search_for_room_button := RobrixIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 14}
-                height: 40
-                draw_icon.svg: (ICON_SEARCH)
-                icon_walk: Walk{width: 16, height: 16}
+            search_for_room_button = <RobrixIconButton> {
+                padding: {top: 10, bottom: 10, left: 12, right: 14}
+                height: Fit
+                margin: { bottom: 4 },
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_SEARCH)
+                    color: (COLOR_PRIMARY)
+                }
+                draw_text: {
+                    color: (COLOR_PRIMARY)
+                    text_style: <REGULAR_TEXT> {}
+                }
+                icon_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: Align{y: 0.5}
+            align: {y: 0.5}
             flow: Right
 
-            loading_spinner := LoadingSpinner {
+            loading_spinner = <LoadingSpinner> {
                 width: 25,
                 height: 25,
-                draw_bg +: {
+                draw_bg: {
                     color: (COLOR_ACTIVE_PRIMARY)
-                    border_size: 3.0
+                    border_size: 3.0,
                 }
             }
 
-            loading_text := Label {
+            loading_text = <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true},
-                margin: Inset { top: 4 }
-                draw_text +: {
+                flow: RightWrap,
+                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: Flow.Right{wrap: true},
-                draw_text +: {
+                flow: RightWrap,
+                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: Inset{top: 10, bottom: 5, left: 5, right: 5}
+            margin: {top: 10, bottom: 5, left: 5, right: 5}
             flow: Down
             width: Fill, height: Fit
 
             show_bg: true
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_PRIMARY)
-                border_radius: 4.0
+                border_radius: 4.0,
                 border_size: 1.0
                 border_color: (COLOR_BG_DISABLED)
                 // shadow_color: #0005
@@ -141,110 +161,132 @@ script_mod! {
                 // 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: Align{y: 0.5}
+                align: {y: 0.5}
                 flow: Right,
 
-                room_avatar := Avatar {
+                room_avatar = <Avatar> {
                     width: 45, height: 45,
-                    cursor: MouseCursor.Default,
-                    text_view +: {
-                        text +: {
-                            draw_text +: {
-                                text_style: TITLE_TEXT { font_size: 16.0 }
-                            }
-                        }
-                    }
+                    cursor: 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: Inset{top: 3} // align it with the above room_avatar
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: TITLE_TEXT { font_size: 16 }
+                    margin: {top: 3} // align it with the above room_avatar
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{ font_size: 16 }
                         color: (COLOR_TEXT)
+                        wrap: Word,
                     }
                 }
             }
 
             // Something like "This is a [regular|direct] [room|space] with N members."
-            room_summary := Label {
+            room_summary = <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true},
-                margin: Inset{top: 10}
-                draw_text +: {
+                flow: RightWrap,
+                margin: {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: theme.font_regular { font_size: 12 } }
+            subsection_alias_id = <SubsectionLabel> {
+                draw_text: { text_style: { font_size: 12 } }
             }
 
-            room_alias_and_id_view := View {
-                padding: Inset{left: 15}
+            room_alias_and_id_view = <View> {
+                padding: {left: 15}
                 width: Fill, height: Fit
                 spacing: 8.4 // to line up the colons if the ID wraps to the next line
-                align: Align{y: 0.5}
-                flow: Flow.Right{wrap: true},
+                align: {y: 0.5}
+                flow: RightWrap,
 
-                room_alias := Label {
+                room_alias = <Label> {
                     width: Fit, height: Fit
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
+                    flow: RightWrap,
+                    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: Flow.Right{wrap: true},
-                    draw_text +: {
+                    flow: RightWrap,
+                    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: theme.font_regular { font_size: 12 } }
+            subsection_topic = <SubsectionLabel> {
+                draw_text: { text_style: { font_size: 12 } }
             }
 
-            room_topic := MessageHtml {
-                padding: Inset{left: 20, top: 5, right: 10, bottom: 10}
+            room_topic = <MessageHtml> {
+                padding: {left: 20, top: 5, right: 10, bottom: 10}
                 width: Fill,
-                height: Fit,
+                height: Fit { max: 200 }
                 font_size: 11
                 font_color: (MESSAGE_TEXT_COLOR)
             }
 
-            buttons_view := View {
+            buttons_view = <View> {
                 width: Fill
                 height: Fit,
-                flow: Flow.Right{wrap: true},
-                align: Align{y: 0.5}
+                flow: RightWrap,
+                align: {y: 0.5}
                 spacing: 15
-                margin: Inset{top: 15}
+                margin: {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 := RobrixPositiveIconButton {
+                join_room_button = <RobrixIconButton> {
                     padding: 15,
-                    draw_icon.svg: (ICON_JOIN_ROOM)
-                    icon_walk: Walk{width: 17, height: 17, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_JOIN_ROOM),
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
+                    icon_walk: {width: 17, height: 17, margin: {left: -2, right: -1} }
+
+                    draw_bg: {
+                        border_color: (COLOR_FG_ACCEPT_GREEN),
+                        color: #f0fff0 // light green
+                    }
+                    draw_text: {
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
                 }
 
-                cancel_button := RobrixNegativeIconButton {
-                    align: Align{x: 0.5, y: 0.5}
+                cancel_button = <RobrixIconButton> {
+                    align: {x: 0.5, y: 0.5}
                     padding: 15
-                    draw_icon.svg: (ICON_FORBIDDEN)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_FORBIDDEN)
+                        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)
+                    }
                     text: "Cancel"
+                    draw_text:{
+                        color: (COLOR_FG_DANGER_RED),
+                    }
                 }
             }
         }
@@ -252,7 +294,7 @@ script_mod! {
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct AddRoomScreen {
     #[deref] view: View,
     #[rust] state: AddRoomState,
@@ -350,10 +392,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(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));
+            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));
 
             // Enable or disable the button based on if the text input is empty.
             if let Some(text) = room_alias_id_input.changed(actions) {
@@ -364,7 +406,6 @@ impl Widget for AddRoomScreen {
             if cancel_button.clicked(actions) {
                 self.state = AddRoomState::WaitingOnUserInput;
                 room_alias_id_input.set_text(cx, "");
-                room_alias_id_input.set_key_focus(cx);
                 self.redraw(cx);
             }
 
@@ -418,7 +459,6 @@ impl Widget for AddRoomScreen {
                             None,
                         );
                         self.state = AddRoomState::ParseError(err_str);
-                        room_alias_id_input.set_key_focus(cx);
                     }
                 }
                 self.redraw(cx);
@@ -437,9 +477,6 @@ impl Widget for AddRoomScreen {
                                 room_or_alias_id,
                                 via,
                             };
-                            // Reset the buttons' hover states when they are first shown.
-                            join_room_button.reset_hover(cx);
-                            cancel_button.reset_hover(cx);
                             self.redraw(cx);
                             break;
                         }
@@ -542,9 +579,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(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));
+        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));
 
         match &self.state {
             AddRoomState::WaitingOnUserInput => {
@@ -556,11 +593,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(cx, ids!(error_text)).set_text(cx, err_str);
+                error_view.label(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(cx, ids!(loading_text)).set_text(
+                loading_room_view.label(ids!(loading_text)).set_text(
                     cx,
                     &format!("Fetching {room_or_alias_id}..."),
                 );
@@ -576,7 +613,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(cx, ids!(room_avatar));
+                let room_avatar = fetched_room_summary.avatar(ids!(room_avatar));
                 match &frp.room_avatar {
                     FetchedRoomAvatar::Text(text) => {
                         room_avatar.show_text(cx, None, None, text);
@@ -592,7 +629,7 @@ impl Widget for AddRoomScreen {
                                 cx,
                                 None,
                                 None,
-                                frp.room_name_id.name_for_avatar().unwrap_or("?"),
+                                frp.room_name_id.name_for_avatar().as_deref().unwrap_or("?"),
                             );
                         }
                     }
@@ -602,35 +639,35 @@ impl Widget for AddRoomScreen {
                     Some(RoomType::Space) => ("space", "Space"),
                     _ => ("room", "Room"),
                 };
-                let room_name = fetched_room_summary.label(cx, ids!(room_name));
-                match frp.room_name_id.name_for_avatar() {
+                let room_name = fetched_room_summary.label(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(cx, ids!(subsection_alias_id)).set_text(
+                fetched_room_summary.label(ids!(subsection_alias_id)).set_text(
                     cx,
                     &format!("Main {room_or_space_uc} Alias and ID"),
                 );
-                fetched_room_summary.label(cx, ids!(room_alias)).set_text(
+                fetched_room_summary.label(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(cx, ids!(room_id)).set_text(
+                fetched_room_summary.label(ids!(room_id)).set_text(
                     cx,
                     &format!("ID: {}", frp.room_name_id.room_id().as_str()),
                 );
-                fetched_room_summary.label(cx, ids!(subsection_topic)).set_text(
+                fetched_room_summary.label(ids!(subsection_topic)).set_text(
                     cx,
                     &format!("{room_or_space_uc} Topic"),
                 );
-                fetched_room_summary.html(cx, ids!(room_topic)).set_text(
+                fetched_room_summary.html(ids!(room_topic)).set_text(
                     cx,
                     frp.topic.as_deref().unwrap_or("<i>No topic set</i>"),
                 );
 
-                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 room_summary = fetched_room_summary.label(ids!(room_summary));
+                let join_room_button = fetched_room_summary.button(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}."));
@@ -724,6 +761,8 @@ impl Widget for AddRoomScreen {
                     AddRoomState::FetchedRoomPreview { .. } => {
                         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);
                     }
                     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 07fb24f0d..91911a3df 100644
--- a/src/home/edited_indicator.rs
+++ b/src/home/edited_indicator.rs
@@ -11,33 +11,35 @@ use chrono::{DateTime, Local};
 use makepad_widgets::*;
 use matrix_sdk_ui::timeline::EventTimelineItem;
 
-use crate::utils::unix_time_millis_to_datetime;
+use crate::{shared::callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, utils::unix_time_millis_to_datetime};
 
-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.EDITED_INDICATOR_FONT_SIZE = 9.5
-    mod.widgets.EDITED_INDICATOR_FONT_COLOR = #666666
+    pub EDITED_INDICATOR_FONT_SIZE  = 9.5
+    pub EDITED_INDICATOR_FONT_COLOR = #666666
 
-    mod.widgets.EditedIndicator = #(EditedIndicator::register_widget(vm)) {
+    pub EditedIndicator = {{EditedIndicator}} {
         visible: false, // default to hidden
         width: Fit, height: Fit
         flow: Right,
         padding: 0,
-        margin: Inset{ top: 5 }
+        margin: { top: 5 }
 
         // TODO: re-enable this once we have implemented the edit history modal
-        // cursor: MouseCursor.Hand,
+        // cursor: Hand,
 
-        edit_html := Html {
+        edit_html = <Html> {
             width: Fit, height: Fit
             flow: Right, // do not wrap
             padding: 0,
             margin: 0,
 
-            font_size: (mod.widgets.EDITED_INDICATOR_FONT_SIZE),
+            font_size: (EDITED_INDICATOR_FONT_SIZE),
             font_color: (COLOR_ROBRIX_PURPLE),
             body: "(<u>edited</u>)",
         }
@@ -45,7 +47,7 @@ script_mod! {
 }
 
 /// A interactive label that indicates a message has been edited.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct EditedIndicator {
     #[deref] view: View,
     #[rust] latest_edit_ts: Option<DateTime<Local>>,
@@ -65,7 +67,7 @@ impl Widget for EditedIndicator {
             //     false
             // },
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
                 false
             }
             _ => false,
@@ -79,7 +81,8 @@ impl Widget for EditedIndicator {
                 "Last edit time unknown".to_string()
             };
             cx.widget_action(
-                self.widget_uid(), 
+                self.widget_uid(),
+                &scope.path,
                 TooltipAction::HoverIn {
                     text,
                     widget_rect: area.rect(cx),
@@ -122,11 +125,10 @@ impl EditedIndicatorRef {
 
 
 /// Actions emitted by an `EditedIndicator` widget.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 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 ae89492b0..842682adf 100644
--- a/src/home/editing_pane.rs
+++ b/src/home/editing_pane.rs
@@ -10,107 +10,129 @@ use matrix_sdk::{
 };
 use matrix_sdk_ui::timeline::{EventTimelineItem, MsgLikeKind, TimelineEventItemId, TimelineItemContent};
 
-use crate::shared::mentionable_text_input::{MentionableTextInputWidgetExt, MentionableTextInputWidgetRefExt};
+use crate::shared::mentionable_text_input::MentionableTextInputWidgetExt;
 use crate::{
     shared::popup_list::{enqueue_popup_notification, PopupKind},
     sliding_sync::{submit_async_request, MatrixRequest, TimelineKind},
 };
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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;
 
-    mod.widgets.EditingContent = View {
+    EditingContent = <View> {
         width: Fill,
-        height: Fit{max: FitBound.Rel{base: Base.Full, factor: 0.75}}
-        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}
+        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}
         spacing: 10,
         flow: Down,
 
         show_bg: false // don't cover up the RoomInputBar
 
-        View {
+        <View> {
             width: Fill, height: Fit
             flow: Right
-            align: Align{y: 0.5}
-            padding: Inset{left: 5, right: 5}
+            align: {y: 0.5}
+            padding: {left: 5, right: 5}
 
-            Label {
+            <Label> {
                 width: Fill,
                 flow: Right, // do not wrap
-                margin: Inset{top: 3}
-                draw_text +: {
-                    text_style: USERNAME_TEXT_STYLE {},
+                margin: {top: 3}
+                draw_text: {
+                    text_style: <USERNAME_TEXT_STYLE> {},
                     color: #222,
                 }
                 text: "Editing:"
             }
 
-            cancel_button := RobrixNegativeIconButton {
+            cancel_button = <RobrixIconButton> {
                 width: Fit,
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: Inset{left: 5, right: 5},
+                margin: {left: 5, right: 5},
 
-                draw_icon.svg: (ICON_CLOSE)
-                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                draw_bg: {
+                    border_color: (COLOR_FG_DANGER_RED),
+                    color: (COLOR_BG_DANGER_RED)
+                    border_radius: 5
+                }
+                draw_icon: {
+                    svg_file: (ICON_CLOSE),
+                    color: (COLOR_FG_DANGER_RED)
+                }
+                icon_walk: {width: 16, height: 16, margin: 0}
             }
 
-            accept_button := RobrixPositiveIconButton {
+            accept_button = <RobrixIconButton> {
                 width: Fit,
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: Inset{left: 5},
+                margin: {left: 5},
 
-                draw_icon.svg: (ICON_CHECKMARK)
-                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                draw_bg: {
+                    border_color: (COLOR_FG_ACCEPT_GREEN),
+                    color: (COLOR_BG_ACCEPT_GREEN)
+                    border_radius: 5
+                }
+                draw_icon: {
+                    svg_file: (ICON_CHECKMARK)
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
+                icon_walk: {width: 16, height: 16, margin: 0}
             }
         }
 
-        LineH { }
+        <LineH> { }
 
-        edit_text_input := MentionableTextInput {
+        edit_text_input = <MentionableTextInput> {
             width: Fill
-            height: Fit{max: FitBound.Rel{base: Base.Full, factor: 0.75}}
-            margin: Inset{ bottom: 5, top: 5 }
+            height: Fit { max: Rel { base: Full, factor: 0.625 } }
+            margin: { bottom: 5, top: 5 }
         }
     }
 
 
-    mod.widgets.EditingPane = #(EditingPane::register_widget(vm)) {
+    pub EditingPane = {{EditingPane}} {
         visible: false,
         width: Fill,
-        height: Fit{max: FitBound.Rel{base: Base.Full, factor: 0.75}}
-        align: Align{x: 0.5, y: 1.0}
+        height: Fit { max: Rel { base: Full, factor: 0.625 } }
+        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: Inset{top: 1000}
+        margin: {top: 1000}
 
-        editing_content := mod.widgets.EditingContent { }
+        editing_content = <EditingContent> { }
 
-        animator: Animator{
-            panel: {
-                default: @hide
-                show: AnimatorState{
+        animator: {
+            panel = {
+                default: hide,
+                show = {
                     redraw: true,
                     from: {all: Forward {duration: 0.8}}
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
-                    apply: { margin: Inset{top: 0} }
+                    apply: { margin: {top: 0} }
                 }
-                hide: AnimatorState{
+                hide = {
                     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: Inset{top: 1000} }
+                    apply: { margin: {top: 1000} }
                 }
             }
         }
@@ -118,21 +140,13 @@ script_mod! {
 }
 
 /// Action emitted by the EditingPane widget.
-#[derive(Clone, Default, Debug)]
+#[derive(Clone, DefaultNone, 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,
@@ -140,14 +154,17 @@ struct EditingPaneInfo {
 }
 
 /// A view that slides in from the bottom of the screen to allow editing a message.
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct EditingPane {
-    #[source] source: ScriptObjectRef,
-    #[deref] view: View,
-    #[apply_default] animator: Animator,
-
-    #[rust] info: Option<EditingPaneInfo>,
-    #[rust] is_animating_out: bool,
+    #[deref]
+    view: View,
+    #[animator]
+    animator: Animator,
+
+    #[rust]
+    info: Option<EditingPaneInfo>,
+    #[rust]
+    is_animating_out: bool,
 }
 
 impl Widget for EditingPane {
@@ -163,14 +180,11 @@ 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,
-                matches!(animator_action, AnimatorAction::Animating { .. }),
-            ) {
+            match (self.is_animating_out, animator_action.is_animating()) {
                 (true, false) => {
                     self.visible = false;
                     self.info = None;
-                    cx.widget_action(self.widget_uid(),  EditingPaneAction::Hidden);
+                    cx.widget_action(self.widget_uid(), &scope.path, EditingPaneAction::Hidden);
                     cx.revert_key_focus();
                     self.redraw(cx);
                     return;
@@ -185,13 +199,11 @@ impl Widget for EditingPane {
 
         if let Event::Actions(actions) = event {
 
-            let edit_text_input = self
-                .mentionable_text_input(cx, ids!(editing_content.edit_text_input))
-                .text_input_ref();
+            let edit_text_input = self.mentionable_text_input(ids!(editing_content.edit_text_input)).text_input_ref();
 
             // 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(cx, ids!(cancel_button)).clicked(actions)
+            if self.button(ids!(cancel_button)).clicked(actions)
                 || edit_text_input.escaped(actions)
             {
                 self.animator_play(cx, ids!(panel.hide));
@@ -201,7 +213,7 @@ impl Widget for EditingPane {
 
             let Some(info) = self.info.as_ref() else { return };
 
-            if self.button(cx, ids!(accept_button)).clicked(actions)
+            if self.button(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();
@@ -429,7 +441,7 @@ impl EditingPane {
             return;
         }
 
-        let edit_text_input = self.mentionable_text_input(cx, ids!(editing_content.edit_text_input));
+        let edit_text_input = self.mentionable_text_input(ids!(editing_content.edit_text_input));
 
         if let Some(message) = event_tl_item.content().as_message() {
             edit_text_input.set_text(cx, message.body());
@@ -439,7 +451,7 @@ impl EditingPane {
             enqueue_popup_notification(
                 "That message cannot be edited.",
                 PopupKind::Error,
-                Some(4.0),
+                None,
             );
             return;
         }
@@ -451,8 +463,8 @@ impl EditingPane {
         });
 
         self.visible = true;
-        self.button(cx, ids!(accept_button)).reset_hover(cx);
-        self.button(cx, ids!(cancel_button)).reset_hover(cx);
+        self.button(ids!(accept_button)).reset_hover(cx);
+        self.button(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.
@@ -463,8 +475,6 @@ impl EditingPane {
             Cursor { index: text_len, prefer_next_row: false },
             false,
         );
-        // TODO: this doesn't work, likely because of Makepad's bug in which you cannot
-        // give key focus to a widget that hasn't been drawn yet (as it has no Area).
         inner_text_input.set_key_focus(cx);
         self.redraw(cx);
     }
@@ -473,8 +483,8 @@ impl EditingPane {
     pub fn save_state(&self) -> Option<EditingPaneState> {
         self.info.as_ref().map(|info| EditingPaneState {
             event_tl_item: info.event_tl_item.clone(),
-            text_input_state: self.child_by_path(ids!(editing_content.edit_text_input))
-                .as_mentionable_text_input()
+            text_input_state: self
+                .mentionable_text_input(ids!(editing_content.edit_text_input))
                 .text_input_ref()
                 .save_state(),
         })
@@ -488,7 +498,7 @@ impl EditingPane {
         timeline_kind: TimelineKind,
     ) {
         let EditingPaneState { event_tl_item, text_input_state } = editing_pane_state;
-        self.mentionable_text_input(cx, ids!(editing_content.edit_text_input))
+        self.mentionable_text_input(ids!(editing_content.edit_text_input))
             .text_input_ref()
             .restore_state(cx, text_input_state);
         self.info = Some(EditingPaneInfo {
@@ -496,8 +506,8 @@ impl EditingPane {
             timeline_kind,
         });
         self.visible = true;
-        self.button(cx, ids!(accept_button)).reset_hover(cx);
-        self.button(cx, ids!(cancel_button)).reset_hover(cx);
+        self.button(ids!(accept_button)).reset_hover(cx);
+        self.button(ids!(cancel_button)).reset_hover(cx);
         self.animator_play(cx, ids!(panel.show));
         self.redraw(cx);
 
@@ -544,7 +554,9 @@ impl EditingPaneRef {
         event_tl_item: EventTimelineItem,
         timeline_kind: TimelineKind,
     ) {
-        let Some(mut inner) = self.borrow_mut() else { return; };
+        let Some(mut inner) = self.borrow_mut() else {
+            return;
+        };
         inner.show(cx, event_tl_item, timeline_kind);
     }
 
diff --git a/src/home/event_reaction_list.rs b/src/home/event_reaction_list.rs
index b47749a77..94cd3741c 100644
--- a/src/home/event_reaction_list.rs
+++ b/src/home/event_reaction_list.rs
@@ -3,7 +3,6 @@ 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::{LivePtr, widget_ref_from_live_ptr};
 use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
 use matrix_sdk_ui::timeline::{ReactionInfo, ReactionsByKeyBySender, TimelineEventItemId};
 
@@ -33,47 +32,49 @@ const EMOJI_BG_COLOR_NOT_INCLUDE_SELF: Vec4 = Vec4 {
     w: 1.0,
 }; // LightGrey
 
-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.COLOR_BUTTON_GREY = #B6BABF
-    mod.widgets.REACTION_LIST_PADDING_RIGHT = 30.0;
+    COLOR_BUTTON_GREY = #B6BABF
+    REACTION_LIST_PADDING_RIGHT = 30.0;
 
-    mod.widgets.ReactionList = #(ReactionList::register_widget(vm)) {
+    pub ReactionList = {{ReactionList}} {
         width: Fill,
         height: Fit,
-        flow: Flow.Right{wrap: true},
-        margin: Inset{top: 5.0}
-        padding: Inset{
-            right: (mod.widgets.REACTION_LIST_PADDING_RIGHT)
+        flow: RightWrap,
+        margin: {top: 5.0}
+        padding:{
+            right: (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: Inset{ top: 3, bottom: 3, left: 0, right: 6 },
+            margin: { 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.
-                reaction_bg_color: instance(mod.widgets.COLOR_BUTTON_GREY)
-                reaction_border_color: instance(#001A11)
+                instance reaction_bg_color: (COLOR_BUTTON_GREY)
+                instance reaction_border_color: #001A11
                 // Override values from the base Button type.
                 color_hover: #fef65b
                 hover: 0.0
                 border_size: 1.5
                 border_radius: 3.0
 
-                get_color: fn() -> vec4 {
+                fn get_color(self) -> vec4 {
                     return mix(self.reaction_bg_color, mix(self.reaction_bg_color, self.color_hover, 0.2), self.hover)
                 }
 
-                pixel: fn() {
-                    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                     sdf.box(
                         self.border_size,
                         self.border_size,
@@ -88,10 +89,10 @@ script_mod! {
                     return sdf.result;
                 }
             }
-            draw_text +: {
-                text_style: REGULAR_TEXT {font_size: 10},
+            draw_text: {
+                text_style: <REGULAR_TEXT>{font_size: 9},
                 color: #000000
-                get_color: fn() -> vec4 {
+                fn get_color(self) -> vec4 {
                     return self.color;
                 }
             }
@@ -111,9 +112,8 @@ pub struct ReactionData {
     pub room_id: OwnedRoomId,
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct ReactionList {
-    #[uid] uid: WidgetUid,
     #[redraw] #[rust] area: Area,
     #[live] item: Option<LivePtr>,
     #[rust] children: Vec<(ButtonRef, ReactionData)>,
@@ -178,9 +178,8 @@ impl Widget for ReactionList {
                         } else {
                             (EMOJI_BG_COLOR_NOT_INCLUDE_SELF, EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF)
                         };
-                        let mut reaction_button = button_ref.clone();
-                        script_apply_eval!(cx, reaction_button, {
-                            draw_bg +: { reaction_bg_color: #(bg_color), reaction_border_color: #(border_color) }
+                        button_ref.apply_over(cx, live! {
+                            draw_bg: { reaction_bg_color: (bg_color) , reaction_border_color: (border_color) }
                         });
                         self.do_hover_out(cx, scope, button_ref);
                     }
@@ -201,19 +200,19 @@ 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(), 
+            self.widget_uid(),
+            &scope.path,
             RoomScreenTooltipActions::HoverInReactionButton {
                 widget_rect: button_ref.area().rect(cx),
                 reaction_data,
             },
         );
-        let mut button_ref = button_ref.clone();
-        script_apply_eval!(cx, button_ref, { draw_bg +: { hover: 1.0 } });
+        button_ref.apply_over(cx, live!(draw_bg: {hover: 1.0}));
         cx.set_cursor(MouseCursor::Hand);
     }
 
@@ -221,12 +220,11 @@ 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(),  RoomScreenTooltipActions::HoverOut);
-        let mut button_ref = button_ref.clone();
-        script_apply_eval!(cx, button_ref, { draw_bg +: { hover: 0.0 } });
+        cx.widget_action(self.widget_uid(), &scope.path, RoomScreenTooltipActions::HoverOut);
+        button_ref.apply_over(cx, live!(draw_bg: {hover: 0.0}));
         cx.set_cursor(MouseCursor::Default);
     }
 }
@@ -288,7 +286,7 @@ impl ReactionListRef {
                 reaction_senders: reaction_senders.clone(),
                 room_id: timeline_kind.room_id().clone(),
             };
-            let mut button = widget_ref_from_live_ptr(cx, inner.item).as_button();
+            let button = WidgetRef::new_from_ptr(cx, inner.item).as_button();
             button.set_text(cx, &format!("{}  {}",
                 reaction_data.reaction,
                 reaction_senders.len()
@@ -301,9 +299,12 @@ impl ReactionListRef {
                     EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF,
                 )
             };
-            script_apply_eval!(cx, button, {
-                draw_bg +: { reaction_bg_color: #(bg_color), reaction_border_color: #(border_color) }
-            });
+            button.apply_over(
+                cx,
+                live! {
+                    draw_bg: { reaction_bg_color: (bg_color) , reaction_border_color: (border_color) }
+                },
+            );
             inner.children.push((button, reaction_data));
         }
         inner.timeline_kind = Some(timeline_kind);
diff --git a/src/home/event_source_modal.rs b/src/home/event_source_modal.rs
index 69405d24d..4cc291288 100644
--- a/src/home/event_source_modal.rs
+++ b/src/home/event_source_modal.rs
@@ -7,174 +7,156 @@ use matrix_sdk::ruma::{OwnedEventId, OwnedRoomId};
 use crate::shared::popup_list::{PopupKind, enqueue_popup_notification};
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
+    use link::shaders::*;
 
-    mod.widgets.VIEW_SOURCE_MODAL_BORDER_RADIUS = 6.0
+    use makepad_code_editor::code_view::CodeView;
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::icon_button::RobrixIconButton;
+
+    VIEW_SOURCE_MODAL_BORDER_RADIUS: 6.0
 
     // A small icon button for copying content
-    mod.widgets.CopyButton = RobrixIconButton {
+    CopyButton = <RobrixIconButton> {
         width: Fit, height: Fit,
         padding: 8,
         spacing: 0
-        align: Align{x: 0.5, y: 0.5}
-        icon_walk: Walk{width: 14, height: 14, margin: 0}
-        draw_icon.svg: (ICON_COPY)
-        draw_icon.color: #666
-        draw_bg +: {
+        align: {x: 0.5, y: 0.5}
+        icon_walk: {width: 14, height: 14, margin: 0}
+        draw_icon: {
+            svg_file: (ICON_COPY),
+            color: #666
+        }
+        draw_bg: {
             border_size: 0,
             color: #0000
-            color_hover: #00000015
-            color_down: #00000025
         }
     }
 
-    mod.widgets.EventSourceModal = set_type_default() do #(EventSourceModal::register_widget(vm)) {
-        ..mod.widgets.RoundedView
+    // A row showing a label + value + copy button
+    IdRow = <View> {
+        width: Fill, height: Fit,
+        flow: Right,
+        align: {y: 0.5}
+        margin: {top: -1, bottom: -1}
+        padding: 0
+
+        label = <Label> {
+            width: Fit, height: Fit,
+            draw_text: {
+                text_style: <REGULAR_TEXT>{font_size: 11},
+                color: #666
+            }
+        }
+        value = <Label> {
+            width: Fit, height: Fit,
+            draw_text: {
+                text_style: <THEME_FONT_CODE>{font_size: 10},
+                color: #000
+            }
+        }
+        copy_button = <CopyButton> {
+            margin: {left: 4}
+        }
+    }
 
-        width: Fill { max: 1000 }
+    pub EventSourceModal = {{EventSourceModal}}<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: Align{x: 0.5, y: 0}
+        align: {x: 0.5, y: 0}
+
         flow: Down
-        padding: Inset{top: 20, right: 25, bottom: 20, left: 25}
+        padding: {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: ScrollBar {drag_scrolling: true}
+            scroll_bar_y: {drag_scrolling: true}
         }
 
         show_bg: true
-        draw_bg +: {
+        draw_bg: {
             color: (COLOR_PRIMARY)
-            border_radius: mod.widgets.VIEW_SOURCE_MODAL_BORDER_RADIUS
+            border_radius: (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: Align{y: 0.5}
+            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: Align{x: 0.5, y: 0.5}
-                icon_walk: Walk{width: 18, height: 18, margin: 0}
-                draw_icon.svg: (ICON_CLOSE)
-                draw_icon.color: #666
-                draw_bg +: {
-                    border_size: 0
+                align: {x: 0.5, y: 0.5}
+                icon_walk: {width: 18, height: 18, margin: 0}
+                draw_icon: {
+                    svg_file: (ICON_CLOSE),
+                    color: #666
+                }
+                draw_bg: {
+                    border_size: 0,
                     color: #0000
-                    color_hover: #00000015
-                    color_down: #00000025
                 }
             }
         }
 
         // Room ID row
-        room_id_row := View {
-            width: Fill, height: Fit,
-            flow: Flow.Right {wrap: true}
-            align: Align{y: 0.5}
-            margin: Inset{top: -1, bottom: -1}
-            padding: 0
-
-            Label {
-                width: Fit, height: Fit,
-                draw_text +: {
-                    text_style: REGULAR_TEXT {font_size: 11},
-                    color: #666
-                }
-                text: "Room ID:"
-            }
-            room_id_value := Label {
-                width: Fit, height: Fit,
-                // the top margin is a hack to fix vertical alignment
-                margin: Inset{top: 1, left: 4}
-                draw_text +: {
-                    text_style: theme.font_code {font_size: 10},
-                    color: #000
-                }
-                text: "<Unknown Room ID>"
-            }
-            room_id_copy_button := mod.widgets.CopyButton {
-                margin: Inset{left: 4}
-            }
+        room_id_row = <IdRow> {
+            label = { text: "Room ID:" }
+            value = { text: "" }
         }
 
         // Event ID row
-        event_id_row := View {
-            width: Fill, height: Fit,
-            flow: Flow.Right {wrap: true}
-            align: Align{y: 0.5}
-            margin: Inset{top: -1, bottom: -1}
-            padding: 0
-
-            Label {
-                width: Fit, height: Fit,
-                draw_text +: {
-                    text_style: REGULAR_TEXT {font_size: 11},
-                    color: #666
-                }
-                text: "Event ID:"
-            }
-            event_id_value := Label {
-                width: Fit, height: Fit,
-                // the top margin is a hack to fix vertical alignment
-                margin: Inset{top: 1, left: 4}
-                draw_text +: {
-                    text_style: theme.font_code {font_size: 10},
-                    color: #000
-                }
-                text: "<Unknown Event ID>"
-            }
-            event_id_copy_button := mod.widgets.CopyButton {
-                margin: Inset{left: 4}
-            }
+        event_id_row = <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: Align{y: 0.5}
-            padding: Inset{top: 3, left: 3, right: 6}
+            align: {y: 0.5}
+            padding: {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 := mod.widgets.CopyButton {}
+            copy_source_button = <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 
@@ -182,17 +164,16 @@ script_mod! {
             padding: 6
 
             // The code editor content (drawn first, behind the overlay)
-            code_view := mod.widgets.CodeView {
-                editor +: {
+            code_view = <CodeView>{
+                editor: {
                     margin: 12,
                     width: Fill,
                     height: Fit,
-                    word_wrap: true
-                    draw_bg +: { color: (COLOR_TRANSPARENT) }
-                    draw_text +: { text_style +: { font_size: 11 } }
+                    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 +: {
+                    token_colors: {
                         whitespace: #x6a737d,         // Gray for whitespace markers
                         delimiter: #x24292e,          // Dark gray for punctuation
                         delimiter_highlight: #x005cc5, // Blue for highlighted delimiters
@@ -213,26 +194,45 @@ script_mod! {
                         comment: #x6a737d,            // Gray for comments
                     }
                 }
-                text: "<Unknown Event Source>"
             }
 
             // Border overlay frame (drawn on top of content)
             // Only draws the stroke, fill is transparent
-            border_frame := RoundedView {
+            border_frame = <View> {
                 width: Fill,
                 height: Fill,
                 show_bg: true
-                draw_bg +: {
-                    color: (COLOR_TRANSPARENT)
-                    border_radius: mod.widgets.VIEW_SOURCE_MODAL_BORDER_RADIUS,
-                    border_size: 1.25,
-                    border_color: (COLOR_SECONDARY)
+                draw_bg: {
+                    uniform border_radius: (VIEW_SOURCE_MODAL_BORDER_RADIUS)
+                    uniform border_size: 1.25
+                    uniform border_color: (COLOR_SECONDARY)
+
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+
+                        // Draw rounded box - but only the stroke, no fill
+                        sdf.box(
+                            self.border_size * 0.5,
+                            self.border_size * 0.5,
+                            self.rect_size.x - self.border_size,
+                            self.rect_size.y - self.border_size,
+                            self.border_radius
+                        );
+
+                        // Fill with transparent (let content show through)
+                        sdf.fill_keep(vec4(0.0, 0.0, 0.0, 0.0));
+
+                        // Draw the border stroke
+                        sdf.stroke(self.border_color, self.border_size);
+
+                        return sdf.result;
+                    }
                 }
             }
         }
 
         // just some extra space at the bottom
-        View {
+        <View> {
             width: Fill, height: 25
         }
     }
@@ -252,7 +252,7 @@ pub enum EventSourceModalAction {
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct EventSourceModal {
     #[deref] view: View,
     #[rust] room_id: Option<OwnedRoomId>,
@@ -267,22 +267,13 @@ impl Widget for EventSourceModal {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        if let Some(room_id) = &self.room_id {
-            self.view.label(cx, ids!(room_id_value)).set_text(cx, room_id.as_str());
-        }
-        if let Some(event_id) = &self.event_id {
-            self.view.label(cx, ids!(event_id_value)).set_text(cx, event_id.as_str());
-        }
-        if let Some(json) = &self.original_json {
-            self.view.code_view(cx, ids!(code_view)).set_text(cx, json);
-        }
         self.view.draw_walk(cx, scope, walk)
     }
 }
 
 impl WidgetMatchEvent for EventSourceModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let close_button = self.view.button(cx, ids!(close_button));
+        let close_button = self.view.button(ids!(close_button));
 
         // Handle canceling/closing the modal.
         let close_clicked = close_button.clicked(actions);
@@ -298,7 +289,7 @@ impl WidgetMatchEvent for EventSourceModal {
             return;
         }
 
-        if self.view.button(cx, ids!(room_id_copy_button)).clicked(actions) {
+        if self.view.button(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(
@@ -309,7 +300,7 @@ impl WidgetMatchEvent for EventSourceModal {
             }
         }
 
-        if self.view.button(cx, ids!(event_id_copy_button)).clicked(actions) {
+        if self.view.button(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(
@@ -320,7 +311,7 @@ impl WidgetMatchEvent for EventSourceModal {
             }
         }
 
-        if self.view.button(cx, ids!(copy_source_button)).clicked(actions) {
+        if self.view.button(ids!(copy_source_button)).clicked(actions) {
             if let Some(json) = &self.original_json {
                 cx.copy_to_clipboard(json);
                 enqueue_popup_notification(
@@ -346,10 +337,21 @@ impl EventSourceModal {
         self.event_id = event_id.clone();
         self.original_json = original_json.clone();
 
-        self.view.button(cx, ids!(close_button)).reset_hover(cx);
-        self.view.button(cx, ids!(room_id_copy_button)).reset_hover(cx);
-        self.view.button(cx, ids!(event_id_copy_button)).reset_hover(cx);
-        self.view.button(cx, ids!(copy_source_button)).reset_hover(cx);
+        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(
+            cx,
+            event_id.as_ref().map(|e| e.as_str()).unwrap_or("<Event ID Unknown>"),
+        );
+
+        self.view.code_view(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.redraw(cx);
     }
 }
diff --git a/src/home/home_screen.rs b/src/home/home_screen.rs
index d9bb6c987..1f710ec6b 100644
--- a/src/home/home_screen.rs
+++ b/src/home/home_screen.rs
@@ -2,53 +2,60 @@ use makepad_widgets::*;
 
 use crate::{app::AppState, home::navigation_tab_bar::{NavigationBarAction, SelectedTab}, settings::settings_screen::SettingsScreenWidgetRefExt};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
+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;
 
     // 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.
-    mod.widgets.STACK_VIEW_HEADER_HEIGHT = 75
+    STACK_VIEW_HEADER_HEIGHT = 75
 
-    mod.widgets.StackNavigationWrapper = #(StackNavigationWrapper::register_widget(vm)) {
-        view_stack := StackNavigation {}
+    StackNavigationWrapper = {{StackNavigationWrapper}} {
+        view_stack = <StackNavigation> {}
     }
 
     // A wrapper view around the SpacesBar that lets us show/hide it via animation.
-    mod.widgets.SpacesBarWrapper = set_type_default() do #(SpacesBarWrapper::register_widget(vm)) {
-        ..mod.widgets.RoundedShadowView
-
+    SpacesBarWrapper = {{SpacesBarWrapper}}<RoundedShadowView> {
         width: Fill,
         height: (NAVIGATION_TAB_BAR_SIZE)
-        margin: Inset{left: 4, right: 4}
+        margin: {left: 4, right: 4}
         show_bg: true
-        draw_bg +: {
-            color: (COLOR_PRIMARY_DARKER)
-            border_radius: 4.0
+        draw_bg: {
+            color: (COLOR_PRIMARY_DARKER),
+            border_radius: 4.0,
             border_size: 0.0
             shadow_color: #0005
             shadow_radius: 15.0
-            shadow_offset: vec2(1.0, 0.0)
+            shadow_offset: vec2(1.0, 0.0),
         }
 
-        CachedWidget {
-            root_spaces_bar := mod.widgets.SpacesBar {}
+        <CachedWidget> {
+            root_spaces_bar = <SpacesBar> {}
         }
 
-        animator: Animator{
-            spaces_bar_animator: {
-                default: @hide
-                show: AnimatorState{
-                    redraw: true
-                    from: { all: Forward { duration: (mod.widgets.SPACES_BAR_ANIMATION_DURATION_SECS) } }
+        animator: {
+            spaces_bar_animator = {
+                default: hide,
+                show = {
+                    from: { all: Forward { duration: (SPACES_BAR_ANIMATION_DURATION_SECS) } }
                     apply: { height: (NAVIGATION_TAB_BAR_SIZE),  draw_bg: { shadow_color: #x00000055 } }
                 }
-                hide: AnimatorState{
-                    redraw: true
-                    from: { all: Forward { duration: (mod.widgets.SPACES_BAR_ANIMATION_DURATION_SECS) } }
-                    apply: { height: 0,  draw_bg: { shadow_color: (COLOR_TRANSPARENT) } }
+                hide = {
+                    from: { all: Forward { duration: (SPACES_BAR_ANIMATION_DURATION_SECS) } }
+                    apply: { height: 0,  draw_bg: { shadow_color: #x00000000 } }
                 }
             }
         }
@@ -57,131 +64,136 @@ script_mod! {
     // 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.
-    mod.widgets.HomeScreen = #(HomeScreen::register_widget(vm)) {
-        AdaptiveView {
+    pub HomeScreen = {{HomeScreen}} {
+        <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 := SolidView {
+            Desktop = {
+                show_bg: true
+                draw_bg: {
+                    color: (COLOR_SECONDARY),
+                }
                 width: Fill, height: Fill
                 flow: Right
-                align: Align{x: 0.0, y: 0.0}
+                align: {x: 0.0, y: 0.0}
                 padding: 0,
                 margin: 0,
 
-                show_bg: true
-                draw_bg +: {
-                    color: (COLOR_SECONDARY)
-                }
-
                 // On the left, show the navigation tab bar vertically.
-                CachedWidget {
-                    navigation_tab_bar := mod.widgets.NavigationTabBar {}
+                <CachedWidget> {
+                    navigation_tab_bar = <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: Inset{top: 2, bottom: 2}
-                            margin: Inset{right: 2}
+                            padding: {top: 2, bottom: 2}
+                            margin: {right: 2}
                             spacing: 2
-                            align: Align{y: 0.5}
+                            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: Inset{right: 2}
+                                margin: {right: 2}
                             }
                         }
 
-                        mod.widgets.MainDesktopUI {}
+                        <MainDesktopUI> {}
                     }
 
-                    settings_page := SolidView {
+                    settings_page = <View> {
                         width: Fill, height: Fill
                         show_bg: true,
-                        draw_bg.color: (COLOR_PRIMARY)
+                        draw_bg: {
+                            color: (COLOR_PRIMARY)
+                        }
 
-                        CachedWidget {
-                            settings_screen := mod.widgets.SettingsScreen {}
+                        <CachedWidget> {
+                            settings_screen = <SettingsScreen> {}
                         }
                     }
 
-                    add_room_page := SolidView {
+                    add_room_page = <View> {
                         width: Fill, height: Fill
                         show_bg: true,
-                        draw_bg.color: (COLOR_PRIMARY)
+                        draw_bg: {
+                            color: (COLOR_PRIMARY)
+                        }
 
-                        CachedWidget {
-                            add_room_screen := mod.widgets.AddRoomScreen {}
+                        <CachedWidget> {
+                            add_room_screen = <AddRoomScreen> {}
                         }
                     }
                 }
             }
 
-            Mobile := SolidView {
+            Mobile = {
                 width: Fill, height: Fill
                 flow: Down
 
                 show_bg: true
-                draw_bg.color: (COLOR_PRIMARY)
+                draw_bg: {
+                    color: (COLOR_PRIMARY)
+                }
 
-                mod.widgets.StackNavigationWrapper {
-                    view_stack := StackNavigation {
-                        root_view +: {
+                <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
 
-                                    mod.widgets.RoomsSideBar {}
+                                    <RoomsSideBar> {}
                                 }
 
-                                settings_page := View {
+                                settings_page = <View> {
                                     width: Fill, height: Fill
-                                    padding: Inset{top: 20}
+                                    padding: {top: 20}
 
-                                    CachedWidget {
-                                        settings_screen := mod.widgets.SettingsScreen {}
+                                    <CachedWidget> {
+                                        settings_screen = <SettingsScreen> {}
                                     }
                                 }
 
-                                add_room_page := View {
+                                add_room_page = <View> {
                                     width: Fill, height: Fill
-                                    padding: Inset{top: 20}
+                                    padding: {top: 20}
 
-                                    CachedWidget {
-                                        add_room_screen := mod.widgets.AddRoomScreen {}
+                                    <CachedWidget> {
+                                        add_room_screen = <AddRoomScreen> {}
                                     }
                                 }
                             }
@@ -192,129 +204,145 @@ script_mod! {
                             // 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 := mod.widgets.SpacesBarWrapper {}
+                            <CachedWidget> {
+                                spaces_bar_wrapper = <SpacesBarWrapper> {}
                             }
 
                             // At the bottom of the root view, show the navigation tab bar horizontally.
-                            CachedWidget {
-                                navigation_tab_bar := mod.widgets.NavigationTabBar {}
+                            <CachedWidget> {
+                                navigation_tab_bar = <NavigationTabBar> {}
                             }
                         }
 
-                        main_content_view := StackNavigationView {
+                        main_content_view = <StackNavigationView> {
                             width: Fill, height: Fill
-                            draw_bg.color: (COLOR_PRIMARY)
-                            header +: {
-                                clip_x: false,
-                                clip_y: false,
+                            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 +: {
-                                    color: instance((COLOR_PRIMARY_DARKER))
-                                    color_dither: uniform(1.0)
-                                    gradient_border_horizontal: uniform(0.0)
-                                    gradient_fill_horizontal: uniform(0.0)
-                                    color_2: instance(vec4(-1))
-
-                                    border_radius: uniform(4.0)
-                                    border_size: uniform(0.0)
-                                    border_color: instance(#0000)
-                                    border_color_2: instance(vec4(-1))
-
-                                    shadow_color: instance(#0005)
-                                    shadow_radius: uniform(9.0)
-                                    shadow_offset: uniform(vec2(1.0, 0.0))
-
-                                    rect_size2: varying(vec2(0))
-                                    rect_size3: varying(vec2(0))
-                                    rect_pos2: varying(vec2(0))
-                                    rect_shift: varying(vec2(0))
-                                    sdf_rect_pos: varying(vec2(0))
-                                    sdf_rect_size: varying(vec2(0))
-
-                                    vertex: fn() {
-                                        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
+                                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
+                                        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)
+                                        return self.clip_and_transform_vertex(self.rect_pos2, self.rect_size3)
                                     }
 
-                                    pixel: fn() {
-                                        let sdf = Sdf2d.viewport(self.pos * 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 mut fill_color = self.color
-                                        if self.color_2.x > -0.5 {
-                                            let dither = Math.random_2d(self.pos.xy) * 0.04 * self.color_dither
-                                            let dir = if self.gradient_fill_horizontal > 0.5 self.pos.x else self.pos.y
-                                            fill_color = mix(self.color self.color_2 dir + dither)
+                                        let gradient_border_dir = self.pos.y + dither;
+                                        if (self.gradient_border_horizontal > 0.5) {
+                                            gradient_border_dir = self.pos.x + dither;
                                         }
 
-                                        let mut stroke_color = self.border_color
-                                        if self.border_color_2.x > -0.5 {
-                                            let dither = Math.random_2d(self.pos.xy) * 0.04 * self.color_dither
-                                            let dir = if self.gradient_border_horizontal > 0.5 self.pos.x else self.pos.y
-                                            stroke_color = mix(self.border_color self.border_color_2 dir + 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)
+                                            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 {
-                                            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)
+                                        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(fill_color)
+                                        sdf.fill_keep(mix(self.color, color_2, gradient_fill_dir))
 
                                         if self.border_size > 0.0 {
-                                            sdf.stroke(stroke_color self.border_size)
+                                            sdf.stroke(
+                                                mix(self.border_color, border_color_2, gradient_border_dir),
+                                                self.border_size)
                                         }
                                         return sdf.result
                                     }
                                 }
 
-                                padding: Inset{top: 30, bottom: 0}
-                                height: (mod.widgets.STACK_VIEW_HEADER_HEIGHT),
-
-                                content +: {
-                                    height: (mod.widgets.STACK_VIEW_HEADER_HEIGHT)
-                                    button_container +: {
+                                padding: {top: 30, bottom: 0}
+                                height: (STACK_VIEW_HEADER_HEIGHT),
+                                content = {
+                                    height: (STACK_VIEW_HEADER_HEIGHT)
+                                    button_container = {
                                         padding: 0,
                                         margin: 0
-                                        left_button +: {
+                                        left_button = {
+                                            draw_bg: {
+                                                fn pixel(self) -> vec4 {
+                                                    return #FFFFFF00;
+                                                }
+                                            }
                                             width: Fit, height: Fit,
-                                            padding: Inset{left: 20, right: 23, top: 10, bottom: 10}
-                                            margin: Inset{left: 8, right: 0, top: 0, bottom: 0}
-                                            draw_icon +: { color: (ROOM_NAME_TEXT_COLOR) }
-                                            icon_walk: Walk{width: 13, 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: Inset{top: 8}
-                                        title +: {
-                                            draw_text +: {
+                                    title_container = {
+                                        padding: {top: 8}
+                                        title = {
+                                            draw_text: {
                                                 color: (ROOM_NAME_TEXT_COLOR)
                                             }
                                         }
                                     }
                                 }
                             }
-                            body +: {
-                                margin: Inset{top: (mod.widgets.STACK_VIEW_HEADER_HEIGHT)}
-                                main_content := mod.widgets.MainMobileUI {}
+                            body = {
+                                margin: {top: (STACK_VIEW_HEADER_HEIGHT)}
+                                main_content = <MainMobileUI> {}
                             }
                         }
                     }
@@ -326,11 +354,10 @@ script_mod! {
 
 
 /// A simple wrapper around the SpacesBar that allows us to animate showing or hiding it.
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SpacesBarWrapper {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
 }
 
 impl Widget for SpacesBarWrapper {
@@ -366,7 +393,7 @@ impl SpacesBarWrapperRef {
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct HomeScreen {
     #[deref] view: View,
 
@@ -421,7 +448,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(cx, ids!(settings_screen))
+                                    .settings_screen(ids!(settings_screen))
                                     .populate(cx, None);
                                 self.view.redraw(cx);
                             } else {
@@ -439,7 +466,7 @@ impl Widget for HomeScreen {
                     }
                     Some(NavigationBarAction::ToggleSpacesBar) => {
                         self.is_spaces_bar_shown = !self.is_spaces_bar_shown;
-                        self.view.spaces_bar_wrapper(cx, ids!(spaces_bar_wrapper))
+                        self.view.spaces_bar_wrapper(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.
@@ -471,7 +498,7 @@ impl HomeScreen {
         app_state: &mut AppState,
     ) -> Option<WidgetRef> {
         self.view
-            .page_flip(cx, ids!(home_screen_page_flip))
+            .page_flip(ids!(home_screen_page_flip))
             .set_active_page(
                 cx,
                 match app_state.selected_tab {
@@ -486,7 +513,7 @@ impl HomeScreen {
 
 /// A wrapper around the StackNavigation widget
 /// that simply forwards stack view actions to it.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct StackNavigationWrapper {
     #[deref] view: View,
 }
@@ -503,7 +530,7 @@ impl Widget for StackNavigationWrapper {
 
 impl MatchEvent for StackNavigationWrapper {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        self.stack_navigation(cx, ids!(view_stack))
+        self.stack_navigation(ids!(view_stack))
             .handle_stack_view_actions(cx, actions);
     }
 }
diff --git a/src/home/invite_modal.rs b/src/home/invite_modal.rs
index d644bf542..39e7abedd 100644
--- a/src/home/invite_modal.rs
+++ b/src/home/invite_modal.rs
@@ -4,109 +4,149 @@ use makepad_widgets::*;
 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;
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.InviteModal = #(InviteModal::register_widget(vm)) {
+    pub InviteModal = {{InviteModal}} {
         width: Fit
         height: Fit
 
-        RoundedView {
+        <RoundedView> {
             width: 400
             height: Fit
-            align: Align{x: 0.5}
+            align: {x: 0.5}
             flow: Down
-            padding: Inset{top: 30, right: 25, bottom: 20, left: 25}
+            padding: {top: 30, right: 25, bottom: 20, left: 25}
 
             show_bg: true
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_PRIMARY)
                 border_radius: 4.0
             }
 
-            title_view := View {
+            title_view = <View> {
                 width: Fill,
                 height: Fit,
-                padding: Inset{top: 0, bottom: 25}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 25}
+                align: {x: 0.5, y: 0.0}
 
-                title := Label {
+                title = <Label> {
                     width: Fill
                     height: Fit
-                    align: Align{x: 0.5}
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 13},
+                    align: {x: 0.5}
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 13},
                         color: #000
+                        wrap: Word
                     }
                     text: "Invite to Room"
                 }
             }
 
-            user_id_input := RobrixTextInput {
-                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: Inset{top: 20, bottom: 10}
-                align: Align{x: 1.0, y: 0.5}
+                padding: {top: 20, bottom: 10}
+                align: {x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button := RobrixNeutralIconButton {
+                cancel_button = <RobrixIconButton> {
                     width: 120,
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 12,
-                    draw_icon.svg: (ICON_FORBIDDEN)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_FORBIDDEN)
+                        color: (COLOR_TEXT),
+                    }
+                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+
+                    draw_bg: {
+                        border_size: 0.75
+                        border_color: (COLOR_BG_DISABLED),
+                        color: (COLOR_SECONDARY)
+                    }
                     text: "Cancel"
+                    draw_text:{
+                        color: (COLOR_TEXT),
+                    }
                 }
 
-                confirm_button := RobrixPositiveIconButton {
+                confirm_button = <RobrixIconButton> {
                     width: 120
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 12,
-                    draw_icon.svg: (ICON_ADD_USER)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_ADD_USER)
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
+                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+
+                    draw_bg: {
+                        border_size: 0.75
+                        border_color: (COLOR_FG_ACCEPT_GREEN),
+                        color: (COLOR_BG_ACCEPT_GREEN)
+                    }
                     text: "Invite"
+                    draw_text:{
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
                 }
 
-                okay_button := RobrixIconButton {
+                okay_button = <RobrixIconButton> {
                     visible: false
                     width: 120
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 12,
-                    draw_icon.svg: (ICON_CHECKMARK)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_CHECKMARK)
+                        color: (COLOR_PRIMARY),
+                    }
+                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+
+                    draw_bg: {
+                        color: (COLOR_ACTIVE_PRIMARY)
+                    }
                     text: "Okay"
+                    draw_text:{
+                        color: (COLOR_PRIMARY),
+                    }
                 }
             }
 
-            status_label_view := View {
+            status_label_view = <View> {
                 visible: false
                 width: Fill,
                 height: Fit,
-                align: Align{x: 0.5, y: 0.0}
+                align: {x: 0.5, y: 0.0}
 
-                status_label := Label {
+                status_label = <Label> {
                     width: Fill,
                     height: Fit,
-                    flow: Flow.Right{wrap: true},
-                    align: Align{x: 0.5, y: 0.0}
-                    margin: Inset{top: 10}
-                    draw_text +: {
-                        text_style: REGULAR_TEXT {font_size: 11},
+                    flow: RightWrap,
+                    align: {x: 0.5, y: 0.0}
+                    margin: {top: 10}
+                    draw_text: {
+                        wrap: Word
+                        text_style: <REGULAR_TEXT>{font_size: 11},
                         color: #000
                     }
                     text: ""
@@ -139,7 +179,7 @@ enum InviteModalState {
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct InviteModal {
     #[deref] view: View,
     #[rust] state: InviteModalState,
@@ -159,7 +199,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(cx, ids!(cancel_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -176,16 +216,16 @@ impl WidgetMatchEvent for InviteModal {
         }
 
         // Handle the okay button (shown after invite success).
-        let okay_button = self.view.button(cx, ids!(okay_button));
+        let okay_button = self.view.button(ids!(okay_button));
         if okay_button.clicked(actions) {
             cx.action(InviteModalAction::Close);
             return;
         }
 
-        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 mut status_label = self.view.label(cx, ids!(status_label_view.status_label));
+        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));
 
         // Handle return key or invite button click.
         if let Some(user_id_str) = confirm_button.clicked(actions)
@@ -194,10 +234,10 @@ impl WidgetMatchEvent for InviteModal {
         {
             // Validate the user ID
             if user_id_str.is_empty() {
-                script_apply_eval!(cx, status_label, {
+                status_label_view.apply_over(cx, live!{
                     text: "Please enter a user ID.",
-                    draw_text +: {
-                        color: mod.widgets.COLOR_FG_DANGER_RED,
+                    draw_text: {
+                        color: (COLOR_FG_DANGER_RED),
                     },
                 });
                 status_view.set_visible(cx, true);
@@ -214,24 +254,24 @@ impl WidgetMatchEvent for InviteModal {
                             user_id: user_id.to_owned(),
                         });
                         self.state = InviteModalState::WaitingForInvite(user_id.to_owned());
-                        script_apply_eval!(cx, status_label, {
+                        status_label_view.apply_over(cx, live!(
                             text: "Sending invite...",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER,
+                            draw_text: {
+                                color: (COLOR_ACTIVE_PRIMARY_DARKER),
                             },
-                        });
+                        ));
                         status_view.set_visible(cx, true);
                         confirm_button.set_enabled(cx, false);
                         user_id_input.set_is_read_only(cx, true);
                     }
                 }
                 Err(_) => {
-                    script_apply_eval!(cx, status_label, {
+                    status_label_view.apply_over(cx, live!(
                         text: "Invalid User ID. Expected format: @user:server.xyz",
-                        draw_text +: {
-                            color: mod.widgets.COLOR_FG_DANGER_RED,
+                        draw_text: {
+                            color: (COLOR_FG_DANGER_RED),
                         },
-                    });
+                    ));
                     status_view.set_visible(cx, true);
                     user_id_input.set_key_focus(cx);
                 }
@@ -248,10 +288,10 @@ impl WidgetMatchEvent for InviteModal {
                             && invited_user_id == user_id
                     => {
                         let status = format!("Successfully invited {user_id}!");
-                        script_apply_eval!(cx, status_label, {
-                            text: #(status),
-                            draw_text +: {
-                                color: mod.widgets.COLOR_FG_ACCEPT_GREEN
+                        status_label_view.apply_over(cx, live!{
+                            text: (status),
+                            draw_text: {
+                                color: (COLOR_FG_ACCEPT_GREEN)
                             }
                         });
                         status_view.set_visible(cx, true);
@@ -265,10 +305,10 @@ impl WidgetMatchEvent for InviteModal {
                             && invited_user_id == user_id
                     => {
                         let status = format!("Failed to send invite: {error}");
-                        script_apply_eval!(cx, status_label, {
-                            text: #(status),
-                            draw_text +: {
-                                color: mod.widgets.COLOR_FG_DANGER_RED,
+                        status_label_view.apply_over(cx, live!{
+                            text: (status),
+                            draw_text: {
+                                color: (COLOR_FG_DANGER_RED),
                             }
                         });
                         status_view.set_visible(cx, true);
@@ -291,7 +331,7 @@ impl WidgetMatchEvent for InviteModal {
 
 impl InviteModal {
     pub fn show(&mut self, cx: &mut Cx, room_name_id: RoomNameId) {
-        self.view.label(cx, ids!(title)).set_text(
+        self.view.label(ids!(title)).set_text(
             cx,
             &format!("Invite to {room_name_id}"),
         );
@@ -299,10 +339,10 @@ impl InviteModal {
         self.room_name_id = Some(room_name_id);
 
         // Reset the UI state
-        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));
+        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));
         confirm_button.set_visible(cx, true);
         confirm_button.set_enabled(cx, true);
         confirm_button.reset_hover(cx);
@@ -313,10 +353,9 @@ 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(cx, ids!(status_label_view)).set_visible(cx, false);
-        self.view.label(cx, ids!(status_label_view.status_label)).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.redraw(cx);
-        user_id_input.set_key_focus(cx);
     }
 }
 
diff --git a/src/home/invite_screen.rs b/src/home/invite_screen.rs
index 672b6d1ba..ee1b3bed9 100644
--- a/src/home/invite_screen.rs
+++ b/src/home/invite_screen.rs
@@ -13,177 +13,195 @@ use crate::{app::AppStateAction, home::rooms_list::RoomsListRef, join_leave_room
 use super::rooms_list::{InviteState, InviterInfo};
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.InviteScreen = set_type_default() do #(InviteScreen::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
-        // make this a ScrollYView
-        scroll_bars: mod.widgets.ScrollBars {
-            show_scroll_x: false show_scroll_y: true
-            scroll_bar_y.drag_scrolling: true
-        }
-
+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> {
         width: Fill,
         height: Fill,
         flow: Down,
-        align: Align{x: 0.5, y: 0}
-        padding: Inset{left: 20, right: 20, top: 50}
+        align: {x: 0.5, y: 0}
+        padding: {left: 20, right: 20, top: 50}
         spacing: 0,
 
         show_bg: true,
-        draw_bg +: {
-            color: mod.widgets.COLOR_PRIMARY_DARKER
+        draw_bg: {
+            color: (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: Align{x: 0.5, y: 0}
+            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: Align{x: 0.5, y: 0},
-                margin: Inset{top: 2}
+                align: {x: 0.5, y: 0},
+                margin: {top: 2}
                 padding: 0,
-                flow: Flow.Right{wrap: true},
+                flow: RightWrap,
                 text: ""
-                draw_text +: {
-                    text_style: TITLE_TEXT {
+                draw_text: {
+                    text_style: <TITLE_TEXT>{
                         font_size: 15,
                     },
                     color: #000
+                    wrap: Word
                 }
             }
 
-            inviter_user_id := Label {
+            inviter_user_id = <Label> {
                 width: Fill, height: Fit,
-                align: Align{x: 0.5, y: 0},
-                margin: Inset{top: -3},
-                flow: Flow.Right{wrap: true},
+                align: {x: 0.5, y: 0},
+                margin: {top: -3},
+                flow: RightWrap,
                 text: ""
-                draw_text +: {
-                    text_style: TITLE_TEXT {
+                draw_text: {
+                    text_style: <TITLE_TEXT>{
                         font_size: 10,
                     },
                     color: #888
+                    wrap: Word,
                 }
             }
 
-            LineH {
+            <LineH> {
                 width: 240,
-                draw_bg.color: (COLOR_DIVIDER)
+                draw_bg: {
+                    color: (COLOR_DIVIDER),
+                }
             }
         }
 
-        invite_message := Label {
-            margin: Inset{top: 15, bottom: 15},
+        invite_message = <Label> {
+            margin: {top: 15, bottom: 15},
             width: Fill, height: Fit,
-            align: Align{x: 0.5, y: 0},
-            flow: Flow.Right{wrap: true},
+            align: {x: 0.5, y: 0},
+            flow: RightWrap,
             text: "",
-            draw_text +: {
-                text_style: REGULAR_TEXT {
+            draw_text: {
+                text_style: <REGULAR_TEXT>{
                     font_size: 15,
                 },
                 color: #000
+                wrap: Word
             }
         }
 
-        room_view := View {
+        room_view = <View> {
             width: Fill, height: Fit
-            align: Align{x: 0.5, y: 0}
+            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: Align{x: 0.5, y: 0},
+                align: {x: 0.5, y: 0},
                 text: ""
-                // margin: Inset{top: 3}
-                flow: Flow.Right{wrap: true},
-                draw_text +: {
-                    text_style: TITLE_TEXT {
+                // margin: {top: 3}
+                flow: RightWrap,
+                draw_text: {
+                    text_style: <TITLE_TEXT>{
                         font_size: 18,
                     },
                     color: #000
+                    wrap: Word,
                 }
             }
         }
 
-        buttons := View {
+        buttons = <View> {
             width: Fill, height: Fit
             // We'd like to use RightWrap, but it doesn't work with x-centered alignment
-            // flow: Flow.Right{wrap: true},
+            // flow: RightWrap,
             flow: Right,
-            align: Align{x: 0.5, y: 0.5}
-            margin: Inset{top: 20}
+            align: {x: 0.5, y: 0.5}
+            margin: {top: 20}
             spacing: 40
 
-            cancel_button := RobrixNegativeIconButton {
-                align: Align{x: 0.5, y: 0.5}
+            cancel_button = <RobrixIconButton> {
+                align: {x: 0.5, y: 0.5}
                 padding: 15,
-                draw_icon.svg: (ICON_FORBIDDEN)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                draw_icon: {
+                    svg_file: (ICON_FORBIDDEN)
+                    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)
+                }
                 text: "Reject Invite"
+                draw_text:{
+                    color: (COLOR_FG_DANGER_RED),
+                }
             }
 
-            accept_button := RobrixPositiveIconButton {
-                align: Align{x: 0.5, y: 0.5}
+            accept_button = <RobrixIconButton> {
+                align: {x: 0.5, y: 0.5}
                 padding: 15,
-                draw_icon.svg: (ICON_CHECKMARK)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                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)
+                }
                 text: "Join Room"
+                draw_text:{
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
             }
         }
 
-        completion_label := Label {
+        completion_label = <Label> {
             width: Fill, height: Fit,
-            align: Align{x: 0.5, y: 0},
-            margin: Inset{top: 10, bottom: 10},
-            flow: Flow.Right{wrap: true},
-            draw_text +: {
+            align: {x: 0.5, y: 0},
+            margin: {top: 10, bottom: 10},
+            flow: RightWrap,
+            draw_text: {
                 color: (COLOR_FG_ACCEPT_GREEN),
-                text_style: theme.font_bold {font_size: 12}
+                text_style: <THEME_FONT_BOLD>{font_size: 12}
+                wrap: Word,
             }
             text: ""
         }
 
-        View {
+        <View> {
             width: Fill, height: 30,
         }
     }
@@ -236,7 +254,7 @@ pub enum LeaveRoomResultAction {
 
 
 /// A view that shows information about a room that the user has been invited to.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct InviteScreen {
     #[deref] view: View,
 
@@ -288,7 +306,7 @@ impl Widget for InviteScreen {
             }
 
             let Some(info) = self.info.as_ref() else { return; };
-            if let Some(modifiers) = self.view.button(cx, ids!(cancel_button)).clicked_modifiers(actions) {
+            if let Some(modifiers) = self.view.button(ids!(cancel_button)).clicked_modifiers(actions) {
                 self.invite_state = InviteState::WaitingForLeaveResult;
                 if modifiers.shift {
                     submit_async_request(MatrixRequest::LeaveRoom {
@@ -303,7 +321,7 @@ impl Widget for InviteScreen {
                     self.has_shown_confirmation = true;
                 }
             }
-            if let Some(modifiers) = self.view.button(cx, ids!(accept_button)).clicked_modifiers(actions) {
+            if let Some(modifiers) = self.view.button(ids!(accept_button)).clicked_modifiers(actions) {
                 self.invite_state = InviteState::WaitingForJoinResult;
                 if modifiers.shift {
                     submit_async_request(MatrixRequest::JoinRoom {
@@ -376,7 +394,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(cx, ids!(restore_status_view));
+            let mut restore_status_view = self.view.restore_status_view(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);
             }
@@ -388,9 +406,9 @@ impl Widget for InviteScreen {
         };
 
         // First, populate the inviter info, if we have it.
-        let inviter_view = self.view.view(cx, ids!(inviter_view));
+        let inviter_view = self.view.view(ids!(inviter_view));
         let (is_visible, invite_text) = if let Some(inviter) = info.inviter.as_ref() {
-            let inviter_avatar = inviter_view.avatar(cx, ids!(inviter_avatar));
+            let inviter_avatar = inviter_view.avatar(ids!(inviter_avatar));
             let mut drew_avatar = false;
             if let Some(avatar_bytes) = inviter.avatar.as_ref() {
                 drew_avatar = inviter_avatar.show_image(
@@ -407,8 +425,8 @@ impl Widget for InviteScreen {
                     inviter.display_name.as_deref().unwrap_or_else(|| inviter.user_id.as_str()),
                 );
             }
-            let inviter_name = inviter_view.label(cx, ids!(inviter_name));
-            let inviter_user_id = inviter_view.label(cx, ids!(inviter_user_id));
+            let inviter_name = inviter_view.label(ids!(inviter_name));
+            let inviter_user_id = inviter_view.label(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);
@@ -427,11 +445,11 @@ impl Widget for InviteScreen {
             (false, "You have been invited to join:")
         };
         inviter_view.set_visible(cx, is_visible);
-        self.view.label(cx, ids!(invite_message)).set_text(cx, invite_text);
+        self.view.label(ids!(invite_message)).set_text(cx, invite_text);
 
         // Second, populate the room info, if we have it.
-        let room_view = self.view.view(cx, ids!(room_view));
-        let room_avatar = room_view.avatar(cx, ids!(room_avatar));
+        let room_view = self.view.view(ids!(room_view));
+        let room_avatar = room_view.avatar(ids!(room_avatar));
         match &info.room_avatar() {
             FetchedRoomAvatar::Text(text) => {
                 room_avatar.show_text(
@@ -450,11 +468,11 @@ impl Widget for InviteScreen {
             }
         }
         let invite_room_label = info.room_name_id().to_string();
-        room_view.label(cx, ids!(room_name)).set_text(cx, &invite_room_label);
+        room_view.label(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(cx, ids!(cancel_button));
-        let accept_button = self.view.button(cx, ids!(accept_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
+        let accept_button = self.view.button(ids!(accept_button));
         match self.invite_state {
             InviteState::WaitingOnUserInput => {
                 cancel_button.set_enabled(cx, true);
@@ -483,7 +501,7 @@ impl Widget for InviteScreen {
             InviteState::RoomLeft => {
                 cancel_button.set_visible(cx, false);
                 accept_button.set_visible(cx, false);
-                self.view.label(cx, ids!(completion_label)).set_text(
+                self.view.label(ids!(completion_label)).set_text(
                     cx,
                     "Invite successfully rejected. You may close this invite.",
                 );
@@ -516,7 +534,7 @@ impl InviteScreen {
             self.redraw(cx);
         }
 
-        let restore_status_view = self.view.restore_status_view(cx, ids!(restore_status_view));
+        let restore_status_view = self.view.restore_status_view(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 bc1aa8611..f9c6f8cdb 100644
--- a/src/home/light_themed_dock.rs
+++ b/src/home/light_themed_dock.rs
@@ -1,87 +1,97 @@
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-    mod.widgets.RobrixSplitter = Splitter {
-        // size: theme.splitter_size
-        // min_horizontal: theme.splitter_min_horizontal
-        // max_horizontal: theme.splitter_max_horizontal
-        // min_vertical: theme.splitter_min_vertical
-        // max_vertical: theme.splitter_max_vertical
-
-        draw_bg +: {
-            color: COLOR_SECONDARY
-            color_hover: COLOR_ROBRIX_PURPLE
-            color_drag: COLOR_ROBRIX_PURPLE
-
-            pixel: fn() {
-                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
-
-                // Body: dark gray by default, transitions to purple on hover/drag
-                let body_color = mix(
-                    theme.color_bg_app
-                    mix(self.color_hover, self.color_drag, self.drag)
-                    self.hover
-                )
-                sdf.clear(body_color)
-
-                // Draw the grab bar shape
-                if self.is_vertical > 0.5 {
-                    sdf.box(
-                        self.splitter_pad
-                        self.rect_size.y * 0.5 - self.bar_size * 0.5
-                        self.rect_size.x - 2.0 * self.splitter_pad
-                        self.bar_size
-                        self.border_radius
-                    )
-                }
-                else {
-                    sdf.box(
-                        self.rect_size.x * 0.5 - self.bar_size * 0.5
-                        self.splitter_pad
-                        self.bar_size
-                        self.rect_size.y - 2.0 * self.splitter_pad
-                        self.border_radius
-                    )
-                }
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::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)
 
-                // Grab bar: white when hovered/dragged, otherwise matches body
-                let grab_color = mix(self.color, #fff, self.hover)
-                return sdf.fill_keep(grab_color)
+    pub Splitter = <SplitterBase> {
+        draw_bg: {
+            uniform border_radius: 1.0
+            uniform splitter_pad: 1.0
+            uniform splitter_grabber: 110.0
+
+            instance down: 0.0
+            instance hover: 0.0
+
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                sdf.clear(COLOR_SECONDARY);
+
+                sdf.box(
+                    -1.,
+                    -1.,
+                    self.rect_size.x + 2,
+                    self.rect_size.y + 2,
+                    2.5
+                );
+                // if self.is_vertical > 0.5 {
+                //     sdf.box(
+                //         self.splitter_pad,
+                //         self.rect_size.y * 0.5 - self.splitter_grabber * 0.5,
+                //         self.rect_size.x - 2.0 * self.splitter_pad,
+                //         self.splitter_grabber,
+                //         self.border_radius
+                //     );
+                // }
+                // else {
+                //     sdf.box(
+                //         self.rect_size.x * 0.5 - self.splitter_grabber * 0.5,
+                //         self.splitter_pad,
+                //         self.splitter_grabber,
+                //         self.rect_size.y - 2.0 * self.splitter_pad,
+                //         self.border_radius
+                //     );
+                // }
+
+                return sdf.fill_keep(mix(
+                    COLOR_SECONDARY,
+                    COLOR_ROBRIX_PURPLE,
+                    self.hover
+                ));
             }
         }
+        size: (THEME_SPLITTER_SIZE)
+        min_horizontal: (THEME_SPLITTER_MIN_HORIZONTAL)
+        max_horizontal: (THEME_SPLITTER_MAX_HORIZONTAL)
+        min_vertical: (THEME_SPLITTER_MIN_VERTICAL)
+        max_vertical: (THEME_SPLITTER_MAX_VERTICAL)
 
-        animator: Animator{
-            hover: {
-                default: @off
-                off: AnimatorState{
+        animator: {
+            hover = {
+                default: off
+                off = {
                     from: {all: Forward {duration: 0.1}}
                     apply: {
-                        draw_bg: {drag: 0.0, hover: 0.0}
+                        draw_bg: {down: 0.0, hover: 0.0}
                     }
                 }
 
-                on: AnimatorState{
+                on = {
                     from: {
                         all: Forward {duration: 0.1}
-                        drag: Forward {duration: 0.01}
+                        state_down: Forward {duration: 0.01}
                     }
                     apply: {
                         draw_bg: {
-                            drag: 0.0,
-                            hover: snap(1.0)
+                            down: 0.0,
+                            hover: [{time: 0.0, value: 1.0}],
                         }
                     }
                 }
 
-                drag: AnimatorState{
+                drag = {
                     from: { all: Forward { duration: 0.1 }}
                     apply: {
                         draw_bg: {
-                            drag: snap(1.0),
-                            hover: 1.0
+                            down: [{time: 0.0, value: 1.0}],
+                            hover: 1.0,
                         }
                     }
                 }
@@ -89,28 +99,44 @@ script_mod! {
         }
     }
 
-    mod.widgets.RobrixTabCloseButton = TabCloseButton {
-        height: 10.0
-        width: 10.0
-        margin: Inset{ right: theme.space_2, left: -1 }
-        draw_button +: {
-            color: #0
-            color_hover: #FE8610
-            color_active: #FE8610
+    pub TabCloseButton = <TabCloseButtonBase> {
+        height: 10.0, width: 10.0,
+        margin: { right: (THEME_SPACE_2), left: -1 },
+        draw_button: {
+
+            instance hover: float;
+            instance active: float;
+
+            fn pixel(self) -> vec4 {
+                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);
+                let max = mid + vec2(size);
+                sdf.move_to(min.x, min.y);
+                sdf.line_to(max.x, max.y);
+                sdf.move_to(min.x, max.y);
+                sdf.line_to(max.x, min.y);
+                return sdf.stroke(mix(
+                    #0,
+                    #fe8610,
+                    self.hover
+                ), 1.0);
+            }
         }
 
-        animator: Animator{
-            hover: {
-                default: @off
-                off: AnimatorState{
+        animator: {
+            hover = {
+                default: off
+                off = {
                     from: {all: Forward {duration: 0.1}}
                     apply: {
                         draw_button: {hover: 0.0}
                     }
                 }
 
-                on: AnimatorState{
-                    cursor: MouseCursor.Hand
+                on = {
+                    cursor: Hand,
                     from: {all: Snap}
                     apply: {
                         draw_button: {hover: 1.0}
@@ -120,38 +146,58 @@ script_mod! {
         }
     }
 
-    mod.widgets.RobrixTab = Tab {
-        width: Fit
-        height: Fill
+    pub Tab = <TabBase> {
+        width: Fit, height: Fill, //Fixed((THEME_TAB_HEIGHT)),
 
-        align: Align{x: 0.0, y: 0.5}
-        padding: 9
-        margin: 0
+        align: {x: 0.0, y: 0.5}
+        padding: <THEME_MSPACE_3> { }
 
-        close_button: mod.widgets.RobrixTabCloseButton {}
-        draw_text +: {
-            text_style: theme.font_regular {}
-
-            color: #000
-            color_hover: #fe8610
-            color_active: COLOR_PRIMARY
+        close_button: <TabCloseButton> {}
+        draw_text: {
+            text_style: <THEME_FONT_REGULAR> {}
+            instance hover: 0.0
+            instance active: 0.0
+            fn get_color(self) -> vec4 {
+                return mix(
+                    mix(
+                        #x0, // THEME_COLOR_TEXT_INACTIVE,
+                        #xf, // THEME_COLOR_TEXT_ACTIVE,
+                        self.active
+                    ),
+                    #fe8610,
+                    self.hover
+                )
+            }
         }
 
-        draw_bg +: {
-            // Light blue-ish color, de-saturated from COLOR_ACTIVE_PRIMARY
-            color: #E1EEFA
-            // A slightly darker shade of the tab color for hover visibility
-            color_hover: #C8DDEF
-            color_active: COLOR_ACTIVE_PRIMARY
-            // Remove the border and rounded corners from the default Tab style
-            border_size: 0.0
-            border_radius: 3.0
+        draw_bg: {
+            instance hover: float
+            instance active: float
+
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                sdf.box(
+                    -1.,
+                    -1.,
+                    self.rect_size.x + 2,
+                    self.rect_size.y + 2,
+                    1.
+                );
+                sdf.fill_keep(
+                    mix(
+                        (COLOR_DOCK_TAB),
+                        (COLOR_ACTIVE_PRIMARY),
+                        self.active
+                    )
+                );
+                return sdf.result
+            }
         }
 
-        animator: Animator{
-            hover: {
-                default: @off
-                off: AnimatorState{
+        animator: {
+            hover = {
+                default: off
+                off = {
                     from: {all: Forward {duration: 0.2}}
                     apply: {
                         draw_bg: {hover: 0.0}
@@ -159,19 +205,19 @@ script_mod! {
                     }
                 }
 
-                on: AnimatorState{
-                    cursor: MouseCursor.Hand
+                on = {
+                    cursor: Hand,
                     from: {all: Forward {duration: 0.1}}
                     apply: {
-                        draw_bg: {hover: snap(1.0)}
-                        draw_text: {hover: snap(1.0)}
+                        draw_bg: {hover: [{time: 0.0, value: 1.0}]}
+                        draw_text: {hover: [{time: 0.0, value: 1.0}]}
                     }
                 }
             }
 
-            active: {
-                default: @off
-                off: AnimatorState{
+            active = {
+                default: off
+                off = {
                     from: {all: Forward {duration: 0.3}}
                     apply: {
                         close_button: {draw_button: {active: 0.0}}
@@ -180,7 +226,7 @@ script_mod! {
                     }
                 }
 
-                on: AnimatorState{
+                on = {
                     from: {all: Snap}
                     apply: {
                         close_button: {draw_button: {active: 1.0}}
@@ -192,47 +238,64 @@ script_mod! {
         }
     }
 
-    mod.widgets.RobrixTabBar = TabBar {
-        CloseableTab := mod.widgets.RobrixTab {closeable: true}
-        PermanentTab := mod.widgets.RobrixTab {closeable: false}
+    pub TabBar = <TabBarBase> {
+        CloseableTab = <Tab> {closeable:true}
+        PermanentTab = <Tab> {closeable:false}
 
-        draw_drag +: {
+        draw_drag: {
             draw_depth: 10
             color: #x0
         }
-        draw_fill +: {
-            color: COLOR_PRIMARY * 0.96
-        }
-        draw_bg +: {
-            color: COLOR_PRIMARY * 0.96
+        draw_fill: {
+            color: (COLOR_TAB_BAR)
         }
 
-        width: Fill
-        height: max(theme.tab_height, 25.)
+        width: Fill, height: (THEME_TAB_HEIGHT)
 
-        scroll_bars: ScrollBarsTabs {
+        scroll_bars: <ScrollBarsTabs> {
             show_scroll_x: true
             show_scroll_y: false
-            scroll_bar_x +: {
+            scroll_bar_x: {
+                draw_bg: {size: 3.0}
                 bar_size: 4
                 use_vertical_finger_scroll: true
             }
         }
     }
 
-    mod.widgets.RobrixDock = Dock {
-        flow: Down
+    pub Dock = <DockBase> {
+        flow: Down,
 
-        round_corner +: {
-            color: COLOR_SECONDARY
+        round_corner: {
+            border_radius: 20.
+            fn pixel(self) -> vec4 {
+                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);
+                sdf.rect(-10., -10., self.rect_size.x * 2.0, self.rect_size.y * 2.0);
+                sdf.box(
+                    0.25,
+                    0.25,
+                    self.rect_size.x * 2.0,
+                    self.rect_size.y * 2.0,
+                    4.0
+                );
+
+                sdf.subtract()
+                sdf.fill(COLOR_SECONDARY)
+                return sdf.result
+            }
         }
 
-        padding: Inset{left: theme.dock_border_size, top: 0, right: theme.dock_border_size, bottom: theme.dock_border_size}
-        drag_target_preview +: {
+        padding: {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_ACTIVE_PRIMARY, #FFFFFF00, 0.5)
+            color: (mix((COLOR_DRAG_TARGET), #FFFFFF00, pow(0.5, THEME_COLOR_CONTRAST)))
         }
-        tab_bar: mod.widgets.RobrixTabBar {}
-        splitter: mod.widgets.RobrixSplitter {}
+        tab_bar: <TabBar> {}
+        splitter: <Splitter> {}
     }
 }
diff --git a/src/home/link_preview.rs b/src/home/link_preview.rs
index 1d605dc3d..7a09470ab 100644
--- a/src/home/link_preview.rs
+++ b/src/home/link_preview.rs
@@ -7,7 +7,6 @@ use std::{
 };
 
 use makepad_widgets::*;
-use crate::{LivePtr, widget_ref_from_live_ptr};
 use matrix_sdk::ruma::{events::room::{ImageInfo, MediaSource}, OwnedMxcUri, UInt};
 use serde::Deserialize;
 use url::Url;
@@ -15,7 +14,10 @@ use url::Url;
 use crate::{
     home::room_screen::TimelineUpdate,
     media_cache::MediaCache,
-    shared::text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
+    shared::{
+        styles::{COLOR_BG_PREVIEW, COLOR_BG_PREVIEW_HOVER},
+        text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
+    },
     sliding_sync::{submit_async_request, MatrixRequest, UrlPreviewError},
 };
 
@@ -54,157 +56,112 @@ pub enum LinkPreviewCacheEntry {
     Failed(LinkPreviewError),
 }
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+    use crate::shared::styles::*;
+    use crate::shared::text_or_image::TextOrImage;
 
-    mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE = theme.font_regular {
+    pub MESSAGE_TEXT_STYLE = <THEME_FONT_REGULAR>{
         font_size: (16),
         line_spacing: (1.2),
     }
 
-    mod.widgets.LinkPreview = #(LinkPreview::register_widget(vm)) {
+    DEFAULT_IMAGE = dep("crate://self/resources/img/default_image.png")
+
+    pub LinkPreview = {{LinkPreview}} {
         width: Fill, height: Fit,
         flow: Down,
 
-        collapsible_buttons := View {
+        collapsible_button = <View> {
             width: Fill, height: Fit,
             flow: Right,
-            align: Align{x: 0.5, y: 0.5},
-            padding: Inset{top: 4},
+            align: {x: 0.5, y: 0.5},
+            padding: {top: 4},
             visible: false,
-
-            expand_button := RobrixIconButton {
+            expand_collapse_button = <Button> {
                 width: Fit, height: Fit,
-                spacing: 4,
-                padding: Inset{top: 4, bottom: 4, left: 8, right: 8},
-                draw_icon +: {
-                    svg: (ICON_TRIANGLE_DOWN)
-                    color: #666666
-                }
-                icon_walk: Walk{width: 10, height: 10}
-                draw_text +: {
-                    text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
+                padding: {top: 2, bottom: 2, left: 8, right: 8},
+                draw_text: {
+                    text_style: <MESSAGE_TEXT_STYLE> {
                         font_size: 10.0,
                     },
                     color: #666666,
-                    color_hover: #666666,
-                    color_down: #666666,
-                }
-                draw_bg +: {
-                    color: (COLOR_BG_PREVIEW)
-                    color_hover: (COLOR_BG_PREVIEW_HOVER)
-                    color_down: #A8DBBF
-                    border_size: 1.0
-                    border_color: #CCCCCC
-                    border_color_hover: #CCCCCC
-                    border_color_down: #CCCCCC
-                    border_radius: 4.0
-                }
-                text: "Show more links"
-            }
-
-            collapse_button := RobrixIconButton {
-                visible: false,
-                width: Fit, height: Fit,
-                spacing: 4,
-                padding: Inset{top: 4, bottom: 4, left: 8, right: 8},
-                draw_icon +: {
-                    svg: (ICON_TRIANGLE_UP)
-                    color: #666666
-                }
-                icon_walk: Walk{width: 10, height: 10}
-                draw_text +: {
-                    text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
-                        font_size: 10.0,
-                    },
-                    color: #666666,
-                    color_hover: #666666,
-                    color_down: #666666,
-                }
-                draw_bg +: {
-                    color: (COLOR_BG_PREVIEW)
-                    color_hover: (COLOR_BG_PREVIEW_HOVER)
-                    color_down: #A8DBBF
-                    border_size: 1.0
-                    border_color: #CCCCCC
-                    border_color_hover: #CCCCCC
-                    border_color_down: #CCCCCC
-                    border_radius: 4.0
                 }
-                text: "Show fewer links"
+                text: "▼ Show more links"
             }
         }
 
-        item_template: RoundedView {
-            cursor: MouseCursor.Hand,
+        item_template: <RoundedView> {
+            cursor: Hand,
             flow: Right,
             spacing: 4.0,
             width: Fill, height: Fit,
-            margin: Inset{ top: 7 }
-            padding: Inset{ top: 8, bottom: 8, left: 12, right: 12 },
+            margin: { top: 7 }
+            padding: { top: 8, bottom: 8, left: 12, right: 12 },
             spacing: 10
             show_bg: true,
-            draw_bg +: {
-                color: (COLOR_BG_PREVIEW)
+            draw_bg: {
+                color: (COLOR_BG_PREVIEW),
                 border_radius: 4.0
             }
-            align: Align{ y: 0.5 }
+            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: Align{ y: 0.5 }
+                    align: { y: 0.5 }
                 }
             }
 
-            content_view := View {
+            content_view = <View> {
                 width: Fill, height: Fill,
                 flow: Down,
 
-                View {
+                <View> {
                     width: Fit, height: Fit,
-                    flow: Flow.Right{wrap: true},
+                    flow: RightWrap,
 
-                    title_label := LinkLabel {
+                    title_label = <LinkLabel> {
                         width: Fit, height: Fit,
-                        flow: Flow.Right{wrap: true},
-                        draw_text +: {
-                            text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
+                        draw_text: {
+                            text_style: <MESSAGE_TEXT_STYLE> {
                                 font_size: 12.0,
                             },
                             color: #x0000EE,
-                            color_hover: (COLOR_LINK_HOVER),
+                            wrap: Word,
+                            uniform color_hover: (COLOR_LINK_HOVER),
                         }
                     }
 
-                    site_name_label := Label {
+                    site_name_label = <Label> {
                         width: Fit, height: Fit,
-                        flow: Flow.Right{wrap: true},
-                        draw_text +: {
-                            text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
+                        draw_text: {
+                            text_style: <MESSAGE_TEXT_STYLE> {
                                 font_size: 12.0,
                             },
                             color: #666666,
+                            wrap: Word,
                         }
                     }
                 }
 
-                View {
+                <View> {
                     width: Fill, height: Fit,
 
-                    description_label := Label {
+                    description_label = <Label> {
                         width: Fill, height: Fit,
-                        flow: Flow.Right{wrap: true},
-                        padding: Inset{ left: 0.0 }
-                        draw_text +: {
-                            text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
+                        padding: { left: 0.0 }
+                        draw_text: {
+                            text_style: <MESSAGE_TEXT_STYLE> {
                                 font_size: 11.0,
                             },
                             color: #666666,
+                            wrap: Word,
                         }
                     }
                 }
@@ -213,7 +170,7 @@ script_mod! {
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct LinkPreview {
     #[deref]
     view: View,
@@ -224,7 +181,7 @@ pub struct LinkPreview {
     #[layout]
     layout: Layout,
     #[rust]
-    show_collapsible_buttons: bool,
+    show_collapsible_button: bool,
     #[rust]
     is_expanded: bool,
     #[rust]
@@ -235,9 +192,8 @@ 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_btn = self.view.button(cx, ids!(collapsible_buttons.expand_button));
-            let collapse_btn = self.view.button(cx, ids!(collapsible_buttons.collapse_button));
-            if expand_btn.clicked(actions) || collapse_btn.clicked(actions) {
+            let expand_button = self.view.button(ids!(collapsible_button.expand_collapse_button));
+            if expand_button.clicked(actions) {
                 self.is_expanded = !self.is_expanded;
                 self.update_button_and_visibility(cx);
                 cx.redraw_all();
@@ -247,28 +203,26 @@ impl Widget for LinkPreview {
         for view in self.children.iter() {
             match event.hits(cx, view.area()) {
                 Hit::FingerHoverIn(_) | Hit::FingerDown(_) => {
-                    let mut view = view.clone();
-                    script_apply_eval!(cx, view, {
-                        draw_bg.color: mod.widgets.COLOR_BG_PREVIEW_HOVER
+                    view.apply_over(cx, live! {
+                        draw_bg: { color: (COLOR_BG_PREVIEW_HOVER) }
                     });
                 }
                 Hit::FingerHoverOut(_) => {
-                    let mut view = view.clone();
-                    script_apply_eval!(cx, view, {
-                        draw_bg.color: mod.widgets.COLOR_BG_PREVIEW
+                    view.apply_over(cx, live! {
+                        draw_bg: { color: (COLOR_BG_PREVIEW) }
                     });
                 }
                 Hit::FingerUp(fe) => {
                     // return to normal bg color
-                    let mut view = view.clone();
-                    script_apply_eval!(cx, view, {
-                        draw_bg.color: mod.widgets.COLOR_BG_PREVIEW
+                    view.apply_over(cx, live! {
+                        draw_bg: { color: (COLOR_BG_PREVIEW) }
                     });
                     if fe.is_over && fe.is_primary_hit() && fe.was_tap() {
-                        if let Some(html_link) = view.link_label(cx, ids!(content_view.title_label)).borrow() {
+                        if let Some(html_link) = view.link_label(ids!(content_view.title_label)).borrow() {
                             if !html_link.url.is_empty() {
                                 cx.widget_action(
-                                    html_link.widget_uid(), 
+                                    html_link.widget_uid(),
+                                    &scope.path,
                                     HtmlLinkAction::Clicked {
                                         url: html_link.url.clone(),
                                         key_modifiers: fe.modifiers,
@@ -305,22 +259,16 @@ impl LinkPreview {
     }
 
     fn update_button_and_visibility(&mut self, cx: &mut Cx) {
-        if self.show_collapsible_buttons {
-            self.view.view(cx, ids!(collapsible_buttons)).set_visible(cx, true);
-            let expand_btn = self.view.button(cx, ids!(collapsible_buttons.expand_button));
-            let collapse_btn = self.view.button(cx, ids!(collapsible_buttons.collapse_button));
+        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));
             if self.is_expanded {
-                expand_btn.set_visible(cx, false);
-                collapse_btn.set_visible(cx, true);
+                button_ref.set_text(cx, "▲ Show fewer links");
             } else {
-                expand_btn.set_text(cx, &format!("Show {} more links", self.hidden_links_count));
-                expand_btn.set_visible(cx, true);
-                collapse_btn.set_visible(cx, false);
+                button_ref.set_text(cx, &format!("▼ Show {} more links", self.hidden_links_count));
             }
-            expand_btn.reset_hover(cx);
-            collapse_btn.reset_hover(cx);
         } else {
-            self.view.view(cx, ids!(collapsible_buttons)).set_visible(cx, false);
+            self.view.view(ids!(collapsible_button)).set_visible(cx, false);
         }
     }
 }
@@ -350,15 +298,13 @@ impl LinkPreviewRef {
     /// This function is usually called when the link preview is updated.
     /// If the link preview is updated, and the collapsible button should be shown,
     /// this function should be called.
-    fn show_collapsible_buttons(&mut self, cx: &mut Cx, hidden_count: usize) {
+    fn show_collapsible_button(&mut self, cx: &mut Cx, hidden_count: usize) {
          if let Some(mut inner) = self.borrow_mut() {
-            inner.show_collapsible_buttons = true;
+            inner.show_collapsible_button = true;
             inner.hidden_links_count = hidden_count;
-            let expand_btn = inner.view.button(cx, ids!(collapsible_buttons.expand_button));
-            expand_btn.set_text(cx, &format!("Show {} more links", inner.hidden_links_count));
-            expand_btn.set_visible(cx, true);
-            inner.view.button(cx, ids!(collapsible_buttons.collapse_button)).set_visible(cx, false);
-            inner.view.view(cx, ids!(collapsible_buttons)).set_visible(cx, true);
+            let button_ref = inner.view.button(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);
         }
     }
 
@@ -375,15 +321,15 @@ impl LinkPreviewRef {
     where
         F: FnOnce(&mut Cx, &TextOrImageRef, Option<Box<ImageInfo>>, MediaSource, &str, &mut MediaCache) -> bool,
     {
-        let view_ref = widget_ref_from_live_ptr(cx, self.item_template()).as_view();
+        let view_ref = WidgetRef::new_from_ptr(cx, self.item_template()).as_view();
         let mut fully_drawn = true;
         // Set title and URL
-        let title_link = view_ref.link_label(cx, ids!(content_view.title_label));
+        let title_link = view_ref.link_label(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(cx, ids!(image));
+        let text_or_image_ref = view_ref.text_or_image(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,
@@ -402,8 +348,8 @@ impl LinkPreviewRef {
         // Set site name
         if let Some(site_name) = &link_preview_data.site_name {
             view_ref
-                .view(cx, ids!(content_view))
-                .label(cx, ids!(site_name_label))
+                .view(ids!(content_view))
+                .label(ids!(site_name_label))
                 .set_text(cx, site_name);
         }
 
@@ -417,8 +363,8 @@ impl LinkPreviewRef {
                 description
             };
             view_ref
-                .view(cx, ids!(content_view))
-                .label(cx, ids!(description_label))
+                .view(ids!(content_view))
+                .label(ids!(description_label))
                 .set_text(cx, &truncated_description);
         }
 
@@ -429,7 +375,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(cx, ids!(image));
+            let text_or_image_ref = view_ref.text_or_image(ids!(image));
             let original_source = MediaSource::Plain(owned_mxc_uri);
             // Calls the closure with the image populate function
             fully_drawn = image_populate_fn(
@@ -501,7 +447,7 @@ impl LinkPreviewRef {
         }
         if views.len() > MAX_LINK_PREVIEWS_BY_EXPAND {
             let hidden_count = views.len() - MAX_LINK_PREVIEWS_BY_EXPAND;
-            self.show_collapsible_buttons(cx, hidden_count);
+            self.show_collapsible_button(cx, hidden_count);
         }
         self.set_children(views);
         fully_drawn_count == accepted_link_count
@@ -688,7 +634,7 @@ fn insert_into_cache(
             if let LinkPreviewError::RateLimited = error_type {
                 LinkPreviewCacheEntry::Requested
             } else {
-                warning!("Failed to fetch link preview data for {url}: {e:?}");
+                error!("Failed to fetch link preview data for {url}: {e:?}");
                 LinkPreviewCacheEntry::Failed(error_type)
             }
         }
diff --git a/src/home/loading_pane.rs b/src/home/loading_pane.rs
index baa975a3d..8ce99e26e 100644
--- a/src/home/loading_pane.rs
+++ b/src/home/loading_pane.rs
@@ -4,83 +4,100 @@ use matrix_sdk::ruma::OwnedEventId;
 use crate::sliding_sync::TimelineRequestSender;
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::*;
 
-    mod.widgets.LoadingPane = set_type_default() do #(LoadingPane::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub LoadingPane = {{LoadingPane}} {
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        align: Align{x: 0.5, y: 0.5}
+        align: {x: 0.5, y: 0.5}
 
         show_bg: true
-        draw_bg +: {
-            color: #000000b2
+        draw_bg: {
+            fn pixel(self) -> vec4 {
+                return vec4(0., 0., 0., 0.7)
+            }
         }
 
-        main_content := RoundedView {
+        main_content = <RoundedView> {
             flow: Down
             width: 400
             height: Fit
-            padding: Inset{top: 25, right: 30 bottom: 30 left: 45}
+            padding: {top: 25, right: 30 bottom: 30 left: 45}
             spacing: 10
 
             show_bg: true
-            draw_bg +: {
-                color: (COLOR_PRIMARY)
-                border_radius: 4.0
+            draw_bg: {
+                color: #fff
+                border_radius: 3.0
             }
 
-            title_view := View {
+            title_view = <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: Inset{top: 0, bottom: 40}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 40}
+                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,
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: REGULAR_TEXT {
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{
                             font_size: 11.5,
                         },
                         color: #000
+                        wrap: Word
                     }
                 }
 
-                View {
+                <View> {
                     width: Fill, height: Fit
                     flow: Right,
-                    align: Align{x: 1.0, y: 0.5}
+                    align: {x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button := RobrixNegativeIconButton {
-                        align: Align{x: 0.5, y: 0.5}
+                    cancel_button = <RobrixIconButton> {
+                        align: {x: 0.5, y: 0.5}
                         padding: 15
-                        icon_walk: Walk{width: 0, height: 0 }
+                        // draw_icon: {
+                        //     svg_file: (ICON_FORBIDDEN)
+                        //     color: (COLOR_FG_DANGER_RED),
+                        // }
+                        icon_walk: {width: 0, height: 0 }
+
+                        draw_bg: {
+                            border_color: (COLOR_FG_DANGER_RED),
+                            color: (COLOR_BG_DANGER_RED)
+                        }
                         text: "Cancel"
+                        draw_text:{
+                            color: (COLOR_FG_DANGER_RED),
+                        }
                     }
                 }
             }
@@ -91,7 +108,7 @@ script_mod! {
 
 
 /// The state of a LoadingPane: the possible tasks that it may be performing.
-#[derive(Clone, Default)]
+#[derive(Clone, DefaultNone)]
 pub enum LoadingPaneState {
     /// The room is being backwards paginated until the target event is reached.
     BackwardsPaginateUntilEvent {
@@ -106,12 +123,11 @@ 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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct LoadingPane {
     #[deref] view: View,
     #[rust] state: LoadingPaneState,
@@ -158,7 +174,7 @@ impl Widget for LoadingPane {
         let close_pane = {
             matches!(
                 event,
-                Event::Actions(actions) if self.button(cx, ids!(cancel_button)).clicked(actions)
+                Event::Actions(actions) if self.button(ids!(cancel_button)).clicked(actions)
             )
             || event.back_pressed()
             || match event.hits_with_capture_overload(cx, area, true) {
@@ -169,7 +185,7 @@ impl Widget for LoadingPane {
                 }
                 Hit::FingerUp(fue) if fue.is_over => {
                     fue.mouse_button().is_some_and(|b| b.is_back())
-                    || !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
+                    || !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                 _ => false,
             }
@@ -208,7 +224,7 @@ impl LoadingPane {
     }
 
     pub fn set_state(&mut self, cx: &mut Cx, state: LoadingPaneState) {
-        let cancel_button = self.button(cx, ids!(cancel_button));
+        let cancel_button = self.button(ids!(cancel_button));
         match &state {
             LoadingPaneState::BackwardsPaginateUntilEvent {
                 target_event_id,
@@ -235,11 +251,11 @@ impl LoadingPane {
     }
 
     pub fn set_status(&mut self, cx: &mut Cx, status: &str) {
-        self.label(cx, ids!(status)).set_text(cx, status);
+        self.label(ids!(status)).set_text(cx, status);
     }
 
     pub fn set_title(&mut self, cx: &mut Cx, title: &str) {
-        self.label(cx, ids!(title)).set_text(cx, title);
+        self.label(ids!(title)).set_text(cx, title);
     }
 }
 
diff --git a/src/home/location_preview.rs b/src/home/location_preview.rs
index 958b4416f..65db5c6fd 100644
--- a/src/home/location_preview.rs
+++ b/src/home/location_preview.rs
@@ -12,85 +12,108 @@ use robius_location::Coordinates;
 
 use crate::location::{get_latest_location, request_location_update, LocationAction, LocationRequest, LocationUpdate};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::*;
 
-    mod.widgets.LocationPreview = set_type_default() do #(LocationPreview::register_widget(vm)) {
-        ..mod.widgets.RoundedView
-
+    pub LocationPreview = {{LocationPreview}}<RoundedView> {
         visible: false
         width: Fill
         height: Fit
         flow: Down
         // to align this view just below the RoomInputBar's curved border
-        margin: Inset{top: 1}
-        padding: Inset{left: 12, top: 10, bottom: 10, right: 10}
+        margin: {top: 1}
+        padding: {left: 12, top: 10, bottom: 10, right: 10}
         spacing: 8
 
         show_bg: true,
-        draw_bg +: {
-            color: (COLOR_BG_PREVIEW)
-            border_radius: 5.0
+        draw_bg: {
+            color: (COLOR_BG_PREVIEW),
+            border_radius: 5.0,
             border_size: 2.0
         }
 
-        Label {
+        <Label> {
             width: Fill,
             height: Fit,
-            flow: Flow.Right{wrap: true},
-            draw_text +: {
+            draw_text: {
+                wrap: Word,
                 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: Align{x: 0.0, y: 0.5},
-            padding: Inset{left: 10, bottom: 7}
-            flow: Flow.Right{wrap: true},
-            draw_text +: {
+            align: {x: 0.0, y: 0.5},
+            padding: {left: 10, bottom: 7}
+            draw_text: {
+                wrap: Word,
                 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: Flow.Right{wrap: true},
-            spacing: 15
-            align: Align{x: 0.0, y: 0.5}
+            flow: RightWrap,
+            align: {x: 0.0, y: 0.5}
 
-            cancel_location_button := RobrixNegativeIconButton {
-                align: Align{x: 0.5, y: 0.5}
+            cancel_location_button = <RobrixIconButton> {
+                align: {x: 0.5, y: 0.5}
                 padding: 15,
-                margin: 0
-                draw_icon.svg: (ICON_FORBIDDEN)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1, top: -1} }
+                margin: {right: 15}
+                draw_icon: {
+                    svg_file: (ICON_FORBIDDEN)
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1, top: -1} }
+
+                draw_bg: {
+                    border_color: (COLOR_FG_DANGER_RED),
+                    color: (COLOR_BG_DANGER_RED)
+                }
                 text: "Cancel"
+                draw_text:{
+                    color: (COLOR_FG_DANGER_RED),
+                }
             }
 
-            send_location_button := RobrixPositiveIconButton {
+            send_location_button = <RobrixIconButton> {
                 // disabled by default; will be enabled upon receiving valid location update.
                 enabled: false,
-                align: Align{x: 0.5, y: 0.5}
+                align: {x: 0.5, y: 0.5}
                 padding: 15,
-                margin: 0
-                draw_icon.svg: (ICON_SEND)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                draw_icon: {
+                    svg_file: (ICON_SEND)
+                    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)
+                }
                 text: "Yes"
+                draw_text:{
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
             }
         }
     }
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 struct LocationPreview {
     #[deref] view: View,
     #[rust] coords: Option<Result<Coordinates, robius_location::Error>>,
@@ -106,13 +129,13 @@ impl Widget for LocationPreview {
                     Some(LocationAction::Update(LocationUpdate { coordinates, time })) => {
                         self.coords = Some(Ok(*coordinates));
                         self.timestamp = *time;
-                        self.button(cx, ids!(send_location_button)).set_enabled(cx, true);
+                        self.button(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(cx, ids!(send_location_button)).set_enabled(cx, false);
+                        self.button(ids!(send_location_button)).set_enabled(cx, false);
                         needs_redraw = true;
                     }
                     _ => { }
@@ -123,7 +146,7 @@ impl Widget for LocationPreview {
             //       in the RoomScreen handle_event function.
 
             // Handle the cancel location button being clicked.
-            if self.button(cx, ids!(cancel_location_button)).clicked(actions) {
+            if self.button(ids!(cancel_location_button)).clicked(actions) {
                 self.clear();
                 needs_redraw = true;
             }
@@ -144,7 +167,7 @@ impl Widget for LocationPreview {
             Some(Err(e)) => format!("➡ Error getting location: {e:?}"),
             None => String::from("➡ Current location is not yet available."),
         };
-        self.label(cx, ids!(location_label)).set_text(cx, &text);
+        self.label(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 628d477bf..7a88771e3 100644
--- a/src/home/main_desktop_ui.rs
+++ b/src/home/main_desktop_ui.rs
@@ -6,68 +6,64 @@ 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};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.MainDesktopUI = #(MainDesktopUI::register_widget(vm)) {
-        dock := mod.widgets.RobrixDock {
+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> {
             width: Fill,
             height: Fill,
             padding: 0,
             spacing: 0,
             // Align the dock with the RoomFilterInputBar. Not sure why we need this...
-            margin: Inset{left: 1.75}
+            margin: {left: 1.75}
 
-            tab_bar +: {
-                CloseableTab := mod.widgets.RobrixTab { closeable: true }
-                PermanentTab := mod.widgets.RobrixTab { closeable: false }
-            }
 
-
-            root := DockSplitter {
-                axis: SplitterAxis.Horizontal
-                align: SplitterAlign.FromA(300.0)
-                a: @rooms_sidebar_tabs
-                b: @main_tabs
+            root = Splitter {
+                axis: Horizontal,
+                align: FromA(300.0),
+                a: rooms_sidebar_tab,
+                b: main
             }
 
             // This is a "fixed" tab with no header that cannot be closed.
-            rooms_sidebar_tabs := DockTabs{
-                tabs: [@rooms_sidebar_tab]
-                selected: 0
-                hide_tab_bar: true
-            }
-
-            main_tabs := DockTabs{
-                tabs: [@home_tab]
-                selected: 0
+            rooms_sidebar_tab = Tab {
+                name: "" // show no tab header
+                kind: rooms_sidebar // this template is defined below.
             }
 
-            rooms_sidebar_tab := DockTab{
-                name: "" // show no tab header
-                kind: @rooms_sidebar // this template is defined below.
-                template: @PermanentTab
+            main = Tabs {
+                tabs: [home_tab],
+                selected: 0,
             }
 
-            home_tab := DockTab{
+            home_tab = Tab {
                 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 := mod.widgets.RoomsSideBar {}
-            welcome_screen := mod.widgets.WelcomeScreen {}
-            room_screen := mod.widgets.RoomScreen {}
-            invite_screen := mod.widgets.InviteScreen {}
-            space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
+            rooms_sidebar = <RoomsSideBar> {}
+            welcome_screen = <WelcomeScreen> {}
+            room_screen = <RoomScreen> {}
+            invite_screen = <InviteScreen> {}
+            space_lobby_screen = <SpaceLobbyScreen> {}
         }
     }
 }
 
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct MainDesktopUI {
     #[deref]
     view: View,
@@ -110,13 +106,12 @@ pub struct MainDesktopUI {
     drawn_previously: bool,
 }
 
-impl ScriptHook for MainDesktopUI {
-    fn on_after_new(&mut self, vm: &mut ScriptVm) {
-        vm.with_cx_mut(|cx| {
-            self.default_layout = self.save_dock_state(cx);
-        });
+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) {
         self.widget_match_event(cx, event, scope); // invokes `WidgetMatchEvent` impl
@@ -124,7 +119,7 @@ impl Widget for MainDesktopUI {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        if !self.drawn_previously && cx.has_global::<RoomsListRef>() {
+        if !self.drawn_previously {
             // When changing from Mobile to Desktop view mode, we need to restore the state
             // of this widget, which we get from the `AppState` passed down via `scope`.
             // This includes the currently selected space, which we get from the RoomsList widget.
@@ -146,7 +141,7 @@ impl MainDesktopUI {
             return;
         }
 
-        let dock = self.view.dock(cx, ids!(dock));
+        let dock = self.view.dock(ids!(dock));
 
         // If the room is already open, select (jump to) its existing tab
         let room_tab_id = room.tab_id();
@@ -222,7 +217,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(cx, ids!(dock));
+        let dock = self.view.dock(ids!(dock));
         if let Some(room_being_closed) = self.open_rooms.get(&tab_id) {
             self.room_order.retain(|sr| sr != room_being_closed);
 
@@ -255,7 +250,7 @@ impl MainDesktopUI {
 
     /// Closes all tabs
     pub fn close_all_tabs(&mut self, cx: &mut Cx) {
-        let dock = self.view.dock(cx, ids!(dock));
+        let dock = self.view.dock(ids!(dock));
         for tab_id in self.open_rooms.keys() {        
             dock.close_tab(cx, *tab_id);
         }
@@ -277,7 +272,7 @@ impl MainDesktopUI {
         _scope: &mut Scope,
         room_name_id: &RoomNameId,
     ) {
-        let dock = self.view.dock(cx, ids!(dock));
+        let dock = self.view.dock(ids!(dock));
         let Some((new_widget, true)) = dock.replace_tab(
             cx,
             LiveId::from_str(room_name_id.room_id().as_str()),
@@ -310,11 +305,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, cx: &mut Cx, app_state: &mut AppState) {
+    fn save_dock_state_to(&mut self, app_state: &mut AppState) {
         if self.open_rooms.is_empty() {
             return;
         } 
-        let saved_dock_state = self.save_dock_state(cx);
+        let saved_dock_state = self.save_dock_state();
         if let Some(space_id) = self.selected_space.as_ref() {
             app_state.saved_dock_state_per_space.insert(
                 space_id.clone(),
@@ -326,8 +321,8 @@ impl MainDesktopUI {
     }
 
     /// An inner function that creates a `SavedDockState` from the current contents of this widget. 
-    fn save_dock_state(&self, cx: &mut Cx) -> SavedDockState {
-        let dock = self.view.dock(cx, ids!(dock));
+    fn save_dock_state(&self) -> SavedDockState {
+        let dock = self.view.dock(ids!(dock));
         SavedDockState {
             dock_items: dock.clone_state().unwrap_or_default(),
             open_rooms: self.open_rooms.clone(),
@@ -341,7 +336,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(cx, ids!(dock));
+        let dock = self.view.dock(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 {
@@ -434,7 +429,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                     _ => continue,
                 };
                 let app_state = scope.data.get_mut::<AppState>().unwrap();
-                self.save_dock_state_to(cx, app_state);
+                self.save_dock_state_to(app_state);
                 self.selected_space = new_space;
                 self.load_dock_state_from(cx, app_state);
                 self.redraw(cx);
@@ -463,7 +458,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                 }
                 // When dragging a tab, allow it to be dragged
                 DockAction::ShouldTabStartDrag(tab_id) => {
-                    self.view.dock(cx, ids!(dock)).tab_start_drag(
+                    self.view.dock(ids!(dock)).tab_start_drag(
                         cx,
                         tab_id,
                         DragItem::FilePath {
@@ -475,7 +470,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(cx, ids!(dock)).accept_drag(cx, drag_event, DragResponse::Move);
+                        self.view.dock(ids!(dock)).accept_drag(cx, drag_event, DragResponse::Move);
                     }
                 }
                 // When dropping a tab, move it to the new position
@@ -485,7 +480,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                         internal_id: Some(internal_id),
                         ..
                     } = &drop_event.items[0] {
-                        self.view.dock(cx, ids!(dock)).drop_move(cx, drop_event.abs, *internal_id);
+                        self.view.dock(ids!(dock)).drop_move(cx, drop_event.abs, *internal_id);
                     }
                     should_save_dock_action = true;
                 }
@@ -515,7 +510,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                 }
                 Some(MainDesktopUiAction::SaveDockIntoAppState) => {
                     let app_state = scope.data.get_mut::<AppState>().unwrap();
-                    self.save_dock_state_to(cx, app_state);
+                    self.save_dock_state_to(app_state);
                 }
                 _ => {}
             }
diff --git a/src/home/main_mobile_ui.rs b/src/home/main_mobile_ui.rs
index f06118447..dec5b3d33 100644
--- a/src/home/main_mobile_ui.rs
+++ b/src/home/main_mobile_ui.rs
@@ -6,45 +6,47 @@ use crate::{
 
 use super::invite_screen::InviteScreenWidgetExt;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::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;
 
-    mod.widgets.MainMobileUI = set_type_default() do #(MainMobileUI::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub MainMobileUI = {{MainMobileUI}} {
         width: Fill, height: Fill
-        align: Align{x: 0.0, y: 0.5}
         flow: Down,
-
         show_bg: true
-        draw_bg +: {
-            color: COLOR_PRIMARY_DARKER
+        draw_bg: {
+            color: (COLOR_PRIMARY_DARKER)
         }
+        align: {x: 0.0, y: 0.5}
 
-        welcome := mod.widgets.WelcomeScreen {}
-
+        welcome = <WelcomeScreen> {}
         // TODO: see if we can remove these wrappers
-        room_view := View {
-            align: Align{x: 0.5, y: 0.5}
+        room_view = <View> {
+            align: {x: 0.5, y: 0.5}
             width: Fill, height: Fill
-            room_screen := mod.widgets.RoomScreen {}
+            room_screen = <RoomScreen> {}
         }
-        invite_view := View {
-            align: Align{x: 0.5, y: 0.5}
+        invite_view = <View> {
+            align: {x: 0.5, y: 0.5}
             width: Fill, height: Fill
-            invite_screen := mod.widgets.InviteScreen {}
+            invite_screen = <InviteScreen> {}
         }
-        space_lobby_view := View {
-            align: Align{x: 0.5, y: 0.5}
+        space_lobby_view = <View> {
+            align: {x: 0.5, y: 0.5}
             width: Fill, height: Fill
-            space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
+            space_lobby_screen = <SpaceLobbyScreen> {}
         }
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct MainMobileUI {
     #[deref]
     view: View,
@@ -86,7 +88,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(cx, ids!(room_screen))
+                    .room_screen(ids!(room_screen))
                     .set_displayed_room(cx, room_name_id, None);
             }
             Some(SelectedRoom::InvitedRoom { room_name_id }) => {
@@ -95,7 +97,7 @@ impl Widget for MainMobileUI {
                 show_invite = true;
                 show_space_lobby = false;
                 self.view
-                    .invite_screen(cx, ids!(invite_screen))
+                    .invite_screen(ids!(invite_screen))
                     .set_displayed_invite(cx, room_name_id);
             }
             Some(SelectedRoom::Space { space_name_id }) => {
@@ -104,7 +106,7 @@ impl Widget for MainMobileUI {
                 show_invite = false;
                 show_space_lobby = true;
                 self.view
-                    .space_lobby_screen(cx, ids!(space_lobby_screen))
+                    .space_lobby_screen(ids!(space_lobby_screen))
                     .set_displayed_space(cx, space_name_id);
             }
             Some(SelectedRoom::Thread { room_name_id, thread_root_event_id }) => {
@@ -113,7 +115,7 @@ impl Widget for MainMobileUI {
                 show_invite = false;
                 show_space_lobby = false;
                 self.view
-                    .room_screen(cx, ids!(room_screen))
+                    .room_screen(ids!(room_screen))
                     .set_displayed_room(cx, room_name_id, Some(thread_root_event_id.clone()));
             }
             None => {
@@ -124,10 +126,10 @@ impl Widget for MainMobileUI {
             }
         }
 
-        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.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.draw_walk(cx, scope, walk)
     }
 }
diff --git a/src/home/mod.rs b/src/home/mod.rs
index 23a1de96d..8f8ea8e9d 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -1,4 +1,4 @@
-use makepad_widgets::ScriptVm;
+use makepad_widgets::Cx;
 
 pub mod add_room;
 pub mod edited_indicator;
@@ -30,34 +30,33 @@ pub mod room_context_menu;
 pub mod link_preview;
 pub mod room_image_viewer;
 
-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);
-    light_themed_dock::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);
+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);
 }
diff --git a/src/home/navigation_tab_bar.rs b/src/home/navigation_tab_bar.rs
index 95cec1317..0b2a2f014 100644
--- a/src/home/navigation_tab_bar.rs
+++ b/src/home/navigation_tab_bar.rs
@@ -29,195 +29,252 @@
 //!
 
 use makepad_widgets::*;
-use serde::{Deserialize, Serialize};
 use crate::{
     avatar_cache::{self, AvatarCacheEntry}, login::login_screen::LoginAction, logout::logout_confirm_modal::LogoutAction, profile::{
         user_profile::UserProfile,
         user_profile_cache::{self, UserProfileUpdate},
     }, shared::{
-        avatar::{AvatarState, AvatarWidgetExt}, styles::*, verification_badge::VerificationBadgeWidgetExt
+        avatar::{AvatarState, AvatarWidgetExt}, callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, styles::*, verification_badge::VerificationBadgeWidgetExt
     }, sliding_sync::{current_user_id, AccountDataAction}, utils::{self, RoomNameId}
 };
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::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.
-    // Use RadioButtonTab as the base to stay aligned with current widgets/studio behavior.
-    mod.widgets.NavigationTabButton = RadioButtonTab {
+    pub NavigationTabButton = <RadioButton> {
         width: Fill,
         height: (NAVIGATION_TAB_BAR_SIZE - 5),
         padding: 5,
         margin: 3,
-        align: Align{x: 0.5, y: 0.5}
+        align: {x: 0.5, y: 0.5}
         flow: Down,
-        text: "",
 
-        icon_walk: Walk{
-            margin: 0,
-            width: (NAVIGATION_TAB_BAR_SIZE / 2.2),
-            height: (NAVIGATION_TAB_BAR_SIZE / 2.2)
-        }
+        icon_walk: {margin: 0, width: (NAVIGATION_TAB_BAR_SIZE/2.2), height: Fit}
         // Fully hide the text with zero size, zero margin, and zero spacing
-        label_walk: Walk{margin: 0, width: 0, height: 0}
+        label_walk: {margin: 0, width: 0, height: 0}
         spacing: 0,
 
-        draw_bg +: {
+        draw_bg: {
+            radio_type: Tab,
+
             color: (COLOR_NAVIGATION_TAB_BG)
             color_hover: (COLOR_NAVIGATION_TAB_BG_HOVER)
-            color_down: (COLOR_NAVIGATION_TAB_BG_HOVER)
             color_active: (COLOR_NAVIGATION_TAB_BG_ACTIVE)
-            color_focus: (COLOR_NAVIGATION_TAB_BG_ACTIVE)
 
             border_size: 0.0
-            border_radius: 4.0
             border_color: #0000
-            border_color_hover: #0000
-            border_color_down: #0000
-            border_color_active: #0000
-            border_color_focus: #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_text +: {
+        draw_text: {
+            instance hover: 0.0
+            instance active: 0.0
             color: (COLOR_NAVIGATION_TAB_FG)
             color_hover: (COLOR_NAVIGATION_TAB_FG_HOVER)
-            color_down: (COLOR_NAVIGATION_TAB_FG_HOVER)
             color_active: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
-            color_focus: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
 
-            text_style: theme.font_bold {font_size: 9}
+            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
+                )
+            }
         }
 
-        draw_icon +: {
-            color: (COLOR_NAVIGATION_TAB_FG)
-            color_hover: (COLOR_NAVIGATION_TAB_FG_HOVER)
-            color_down: (COLOR_NAVIGATION_TAB_FG_HOVER)
-            color_active: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
-            color_focus: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
+        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
+                )
+            }
         }
     }
 
-    mod.widgets.ProfileIcon = #(ProfileIcon::register_widget(vm)) {
+    ProfileIcon = {{ProfileIcon}}<RoundedView> {
         width: Fill,
         height: (NAVIGATION_TAB_BAR_SIZE - 8)
         flow: Overlay
-        align: Align{ x: 0.5, y: 0.5 }
+        align: { x: 0.5, y: 0.5 }
+        cursor: Default,
 
-        our_own_avatar := Avatar {
-            width: mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE
-            height: mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE
+        our_own_avatar = <Avatar> {
+            width: 45, height: 45
             // If no avatar picture, use white text on a dark background.
-            text_view +: {
-                draw_bg.color: (COLOR_FG_DISABLED),
-                text +: {
-                    draw_text +: {
-                        text_style: theme.font_regular { font_size: mod.widgets.NAVIGATION_TAB_BAR_AVATAR_FONT_SIZE },
-                        color: (COLOR_PRIMARY),
-                    }
+            text_view = {
+                draw_bg: {
+                    background_color: (COLOR_FG_DISABLED),
                 }
+                text = { draw_text: {
+                    text_style: { font_size: 16.0 },
+                    color: (COLOR_PRIMARY),
+                } }
             }
         }
 
-        View {
-            align: Align { x: 0.5, y: 0.0 }
-            margin: Inset{ left: (mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE * 0.9) }
-            verification_badge := VerificationBadge {}
+        <View> {
+            align: { x: 0.5, y: 0.0 }
+            margin: { left: 42 }
+            verification_badge = <VerificationBadge> {}
         }
     }
 
-    mod.widgets.HomeButton = mod.widgets.NavigationTabButton {
-        draw_icon +: { svg: (ICON_HOME) }
+    HomeButton = <NavigationTabButton> {
+        draw_icon: { svg_file: (ICON_HOME) }
+        animator: { active = { default: on } }
     }
 
-    mod.widgets.ToggleSpacesBarButton = RobrixNeutralIconButton {
+    ToggleSpacesBarButton = <RobrixIconButton> {
         width: Fill,
         padding: 16
         spacing: 0,
-        align: Align{x: 0.5, y: 0.5}
-        draw_icon +: {
-            svg: (ICON_SQUARES)
-            color: (COLOR_NAVIGATION_TAB_FG)
+        align: {x: 0.5, y: 0.5}
+        draw_bg: {
+            color: (COLOR_SECONDARY)
         }
-        icon_walk: Walk{
-            width: (NAVIGATION_TAB_BAR_SIZE / 2.2),
-            height: (NAVIGATION_TAB_BAR_SIZE / 2.2),
-            margin: 0
+        draw_icon: {
+            svg_file: (ICON_SQUARES)
+            color: (COLOR_NAVIGATION_TAB_FG)
         }
+        icon_walk: {width: (NAVIGATION_TAB_BAR_SIZE/2.2), height: Fit, margin: 0 }
     }
 
-    mod.widgets.SettingsButton = mod.widgets.NavigationTabButton {
-        draw_icon +: { svg: (ICON_SETTINGS) }
+    SettingsButton = <NavigationTabButton> {
+        draw_icon: { svg_file: (ICON_SETTINGS) }
     }
 
-    mod.widgets.AddRoomButton = mod.widgets.NavigationTabButton {
-        draw_icon +: { svg: (ICON_ADD) }
+    AddRoomButton = <NavigationTabButton> {
+        draw_icon: { svg_file: (ICON_ADD) }
     }
 
-    mod.widgets.Separator = LineH { margin: 8 }
+    Separator = <LineH> { margin: 8 }
 
-    mod.widgets.NavigationTabBar = #(NavigationTabBar::register_widget(vm)) {
-        Desktop := RoundedView {
+    pub NavigationTabBar = {{NavigationTabBar}}<AdaptiveView> {
+        Desktop = {
             flow: Down,
-            align: Align{x: 0.5}
-            padding: Inset{top: 40., bottom: 8}
+            align: {x: 0.5}
+            padding: {top: 40., bottom: 8}
             width: (NAVIGATION_TAB_BAR_SIZE), 
             height: Fill
 
-            draw_bg +: {
+            show_bg: true
+            draw_bg: {
                 color: (COLOR_SECONDARY)
-                border_radius: 4.0
             }
 
-            CachedWidget {
-                profile_icon := mod.widgets.ProfileIcon {}
+            <CachedWidget> {
+                profile_icon = <ProfileIcon> {}
             }
-            CachedWidget {
-                home_button := mod.widgets.HomeButton {}
+
+            <CachedWidget> {
+                home_button = <HomeButton> {}
             }
-            CachedWidget {
-                add_room_button := mod.widgets.AddRoomButton {}
+
+            <CachedWidget> {
+                add_room_button = <AddRoomButton> {}
             }
 
-            mod.widgets.Separator {}
+            <Separator> {}
 
-            CachedWidget {
-                root_spaces_bar := mod.widgets.SpacesBar {}
+            <CachedWidget> {
+                root_spaces_bar = <SpacesBar> {}
             }
 
-            mod.widgets.Separator {}
+            <Separator> {}
 
-            CachedWidget {
-                settings_button := mod.widgets.SettingsButton {}
+            <CachedWidget> {
+                settings_button = <SettingsButton> {}
             }
         }
 
-        Mobile := RoundedView {
+        Mobile = <RoundedView> {
             flow: Right
-            align: Align{x: 0.5, y: 0.5}
+            align: {x: 0.5, y: 0.5}
             width: Fill,
             height: (NAVIGATION_TAB_BAR_SIZE)
 
-            draw_bg +: {
+            show_bg: true
+            draw_bg: {
                 color: (COLOR_SECONDARY)
                 border_radius: 4.0
             }
 
-            CachedWidget {
-                home_button := mod.widgets.HomeButton {}
+            <CachedWidget> {
+                home_button = <HomeButton> {}
             }
-            CachedWidget {
-                add_room_button := mod.widgets.AddRoomButton {}
+
+            <CachedWidget> {
+                add_room_button = <AddRoomButton> {}
             }
 
-            toggle_spaces_bar_button := mod.widgets.ToggleSpacesBarButton {}
+            toggle_spaces_bar_button = <ToggleSpacesBarButton> {}
 
-            CachedWidget {
-                settings_button := mod.widgets.SettingsButton {}
+            <CachedWidget> {
+                settings_button = <SettingsButton> {}
             }
-            CachedWidget {
-                profile_icon := mod.widgets.ProfileIcon {}
+
+            <CachedWidget> {
+                profile_icon = <ProfileIcon> {}
             }
         }
     }
@@ -226,28 +283,22 @@ script_mod! {
 /// The icon in the NavigationTabBar that show the user's avatar.
 ///
 /// Clicking on this icon will open the settings screen.
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct ProfileIcon {
     #[deref] view: View,
     #[rust] own_profile: Option<UserProfile>,
 }
 
-impl ScriptHook for ProfileIcon {
-    fn on_after_reload(&mut self, vm: &mut ScriptVm) {
-        vm.with_cx_mut(|cx| {
-            if self.own_profile.is_none() {
-                self.own_profile = get_own_profile(cx);
-            }
-        });
+impl LiveHook for ProfileIcon {
+    fn after_update_from_doc(&mut self, cx: &mut Cx) {
+        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) {
-        if self.own_profile.is_none() {
-            self.own_profile = get_own_profile(cx);
-        }
-
         // A UI Signal indicates that a user profile or avatar may have been updated.
         if let Event::Signal = event {
             let mut needs_redraw = false;
@@ -340,7 +391,7 @@ impl Widget for ProfileIcon {
         match event.hits(cx, area) {
             Hit::FingerLongPress(_) | Hit::FingerHoverIn(_) => {
                 let (verification_str, bg_color) = self.view
-                    .verification_badge(cx, ids!(verification_badge))
+                    .verification_badge(ids!(verification_badge))
                     .tooltip_content();
                 let text = self.own_profile.as_ref().map_or_else(
                     || format!("Not logged in.\n\n{}", verification_str),
@@ -354,7 +405,8 @@ impl Widget for ProfileIcon {
                     options.bg_color = c;
                 }
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     TooltipAction::HoverIn {
                         text,
                         widget_rect: area.rect(cx),
@@ -363,7 +415,7 @@ impl Widget for ProfileIcon {
                 );
             }
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
             }
             _ => { }
         };
@@ -372,7 +424,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(cx, ids!(our_own_avatar));
+        let our_own_avatar = self.view.avatar(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(
@@ -410,32 +462,20 @@ 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(Script, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct NavigationTabBar {
     #[deref] view: AdaptiveView,
 
     #[rust] is_spaces_bar_shown: bool,
 }
 
-impl ScriptHook for NavigationTabBar {
-    fn on_after_new(&mut self, vm: &mut ScriptVm) {
-        vm.with_cx_mut(|cx| {
-            // Programmatically select the Home button as active on startup,
-            // because animator default overrides in the DSL don't take effect.
-            if let Some(mut rb) = self.view.radio_button(cx, ids!(home_button)).borrow_mut() {
-                rb.animator_play(cx, ids!(active.on));
-            }
-        });
-    }
-}
-
 impl Widget for NavigationTabBar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
 
         if let Event::Actions(actions) = event {
             // Handle one of the radio buttons being clicked (selected).
-            let radio_button_set = self.view.radio_button_set(cx, ids_array!(
+            let radio_button_set = self.view.radio_button_set(ids_array!(
                 home_button,
                 add_room_button,
                 settings_button,
@@ -447,7 +487,7 @@ impl Widget for NavigationTabBar {
                 _ => { }
             }
 
-            if self.view.button(cx, ids!(toggle_spaces_bar_button)).clicked(actions) {
+            if self.view.button(ids!(toggle_spaces_bar_button)).clicked(actions) {
                 self.is_spaces_bar_shown = !self.is_spaces_bar_shown;
                 cx.action(NavigationBarAction::ToggleSpacesBar);
             }
@@ -457,9 +497,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(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::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::Space { .. } => {
                             for rb in radio_button_set.iter() {
                                 if let Some(mut rb_inner) = rb.borrow_mut() {
@@ -481,7 +521,7 @@ impl Widget for NavigationTabBar {
 
 
 /// Which top-level view is currently shown, and which navigation tab is selected.
-#[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+#[derive(Clone, Debug, Default, PartialEq, Eq)]
 pub enum SelectedTab {
     #[default]
     Home,
diff --git a/src/home/new_message_context_menu.rs b/src/home/new_message_context_menu.rs
index 06c963fb3..d78fbc264 100644
--- a/src/home/new_message_context_menu.rs
+++ b/src/home/new_message_context_menu.rs
@@ -13,171 +13,185 @@ 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
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::*;
 
-    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
+    BUTTON_HEIGHT = 35  // KEEP IN SYNC WITH BUTTON_HEIGHT ABOVE
+    MENU_WIDTH = 215    // KEEP IN SYNC WITH MENU_WIDTH ABOVE
 
-    mod.widgets.NewMessageContextMenuButton = RobrixIconButton {
-        height: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT)
+    ContextMenuButton = <RobrixIconButton> {
+        height: (BUTTON_HEIGHT)
         width: Fill,
         margin: 0,
-        icon_walk: Walk{width: 16, height: 16, margin: Inset{right: 3}}
-        // Override the blue default back to neutral for context menu items
-        draw_bg +: { color: (COLOR_PRIMARY), color_hover: #EBEBEB, color_down: #DCDCDC }
-        draw_icon.color: #000
-        draw_text +: { color: #000, color_hover: #000, color_down: #000 }
+        icon_walk: {width: 16, height: 16, margin: {right: 3}}
     }
 
-    mod.widgets.NewMessageContextMenu = set_type_default() do #(NewMessageContextMenu::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub NewMessageContextMenu = {{NewMessageContextMenu}} {
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        cursor: MouseCursor.Default,
+        cursor: Default,
         // Align to top-left such that our coordinate adjustment
         // when showing this menu pane will work correctly.
-        align: Align{x: 0, y: 0}
+        align: {x: 0, y: 0}
 
         // Show a slightly darkened translucent background to make the menu stand out.
         show_bg: true
-        draw_bg +: {
-            color: #0000004D
+        draw_bg: {
+            fn pixel(self) -> vec4 {
+                return vec4(0., 0., 0., 0.3)
+            }
         }
 
-        main_content := RoundedView {
+        main_content = <RoundedView> {
             flow: Down
-            width: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_WIDTH),
+            width: (MENU_WIDTH),
             height: Fit,
             padding: 10
             spacing: 0,
-            align: Align{x: 0, y: 0}
+            align: {x: 0, y: 0}
 
             show_bg: true
-            draw_bg +: {
-                color: (COLOR_PRIMARY)
+            draw_bg: {
+                color: #fff
                 border_radius: 5.0
                 border_size: 0.5
                 border_color: #888
             }
 
             // Shows either the "Add Reaction" button or a reaction text input.
-            react_view := View {
+            react_view = <View> {
                 flow: Overlay
-                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) }
+                height: (BUTTON_HEIGHT)
+                align: {y: 0.5}
+                react_button = <ContextMenuButton> {
+                    draw_icon: { svg_file: (ICON_ADD_REACTION) }
                     text: "Add Reaction"
                 }
 
-                reaction_input_view := View {
+                reaction_input_view = <View> {
                     width: Fill,
-                    height: (mod.widgets.NEW_MESSAGE_CONTEXT_MENU_BUTTON_HEIGHT)
-                    align: Align{y: 0.5}
+                    height: (BUTTON_HEIGHT)
+                    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: Align{x: 0, y: 0.5}
-                        padding: 7
-                        // 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 we just make the TextInput non-wrap.
-                        flow: Flow.Right{wrap: false}, // do not wrap
-                        draw_bg.border_size: 0.0
+                        align: {x: 0, y: 0.5}
                         empty_text: "Enter reaction..."
+                        flow: Right, // do not wrap
+                        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,
+                        }
                     }
-                    reaction_send_button := RobrixPositiveIconButton {
-                        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}
+                    reaction_send_button = <RobrixIconButton> {
+                        height: (BUTTON_HEIGHT)
+                        align: {x: 0.5, y: 0.5}
+                        padding: {left: 10, right: 10, top: 8, bottom: 8}
                         spacing: 0,
-                        draw_icon.svg: (ICON_SEND)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        draw_icon: {
+                            svg_file: (ICON_SEND)
+                            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)
+                        }
+                        text: ""
+                        draw_text:{
+                            color: (COLOR_FG_ACCEPT_GREEN),
+                        }
                     }
                 }
             }
 
-            reply_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_REPLY) }
-                icon_walk +: { margin: Inset{top: 1, right: 3}}
+            reply_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_REPLY) }
+                icon_walk: { margin: {top: 1, right: 3}}
                 text: "Reply"
             }
 
-            divider_after_react_reply := LineH {
-                margin: Inset{top: 3, bottom: 3}
+            divider_after_react_reply = <LineH> {
+                margin: {top: 3, bottom: 3}
                 width: Fill,
             }
 
-            edit_message_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_EDIT) }
-                icon_walk +: { margin: Inset{top: -3, right: 3} }
+            edit_message_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_EDIT) }
+                icon_walk: { margin: {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 := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_PIN) }
+            pin_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_PIN) }
                 text: "" // set dynamically to "Pin Message" or "Unpin Message"
             }
 
-            copy_text_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_COPY) }
+            copy_text_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_COPY) }
                 text: "Copy Text"
             }
 
-            copy_html_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_HTML_FILE) }
-                icon_walk +: { margin: Inset{left: 1.5, right: 1.5} }
+            copy_html_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_HTML_FILE) }
+                icon_walk: { margin: {left: 1.5, right: 1.5} }
                 text: "Copy Text as HTML"
             }
 
-            copy_link_to_message_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_LINK) }
+            copy_link_to_message_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_LINK) }
                 text: "Copy Link to Message"
             }
 
-            view_source_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_VIEW_SOURCE) }
+            view_source_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_VIEW_SOURCE) }
+                icon_walk: { margin: {top: 6, right: 3} }
                 text: "View Source"
             }
 
-            jump_to_related_button := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: { svg: (ICON_JUMP) }
+            jump_to_related_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_JUMP) }
                 text: "Jump to Related Event"
             }
 
-            divider_before_report_delete := LineH {
-                margin: Inset{top: 3, bottom: 3}
+            divider_before_report_delete = <LineH> {
+                margin: {top: 3, bottom: 3}
                 width: Fill,
             }
 
-            // report_button = ContextMenuButton {
-            //     draw_icon +: {
-            //         svg: (ICON_TRASH) // TODO: ICON_REPORT/WARNING/FLAG
+            // report_button = <ContextMenuButton> {
+            //     draw_icon: {
+            //         svg_file: (ICON_TRASH) // TODO: ICON_REPORT/WARNING/FLAG
             //         color: (COLOR_FG_DANGER_RED),
             //     }
-            //     icon_walk +: { margin: Inset{left: -2, right: 3} }
+            //     icon_walk: { margin: {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),
             //     }
             // }
@@ -187,17 +201,19 @@ script_mod! {
             //       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 := mod.widgets.NewMessageContextMenuButton {
-                draw_icon +: {
-                    svg: (ICON_TRASH)
+            delete_button = <ContextMenuButton> {
+                draw_icon: {
+                    svg_file: (ICON_TRASH)
                     color: (COLOR_FG_DANGER_RED),
                 }
-                draw_bg +: {
+                draw_bg: {
                     border_color: (COLOR_FG_DANGER_RED),
                     color: (COLOR_BG_DANGER_RED)
                 }
-                draw_text.color: (COLOR_FG_DANGER_RED),
                 text: "Delete"
+                draw_text:{
+                    color: (COLOR_FG_DANGER_RED),
+                }
             }
         }
     }
@@ -288,10 +304,9 @@ impl MessageDetails {
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct NewMessageContextMenu {
     #[deref] view: View,
-    #[source] source: ScriptObjectRef,
     #[rust] details: Option<MessageDetails>,
 }
 
@@ -320,7 +335,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(cx, ids!(reaction_input_view.reaction_text_input));
+                    let reaction_text_input = self.view.text_input(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 {
@@ -329,7 +344,7 @@ impl Widget for NewMessageContextMenu {
                     false
                 }
                 Hit::FingerUp(fue) if fue.is_over => {
-                    !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
+                    !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                 Hit::FingerScroll(_) => true,
                 _ => false,
@@ -345,17 +360,18 @@ 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(cx, ids!(reaction_input_view.reaction_text_input));
-        let reaction_send_button = self.view.button(cx, ids!(reaction_input_view.reaction_send_button));
+        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));
         if reaction_send_button.clicked(actions)
             || reaction_text_input.returned(actions).is_some()
         {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::React {
                     details: details.clone(),
                     reaction: reaction_text_input.text(),
@@ -366,79 +382,88 @@ impl WidgetMatchEvent for NewMessageContextMenu {
         else if reaction_text_input.escaped(actions) {
             close_menu = true;
         }
-        else if self.button(cx, ids!(react_button)).clicked(actions) {
+        else if self.button(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(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.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.redraw(cx);
             close_menu = false;
         }
-        else if self.button(cx, ids!(reply_button)).clicked(actions) {
+        else if self.button(ids!(reply_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::Reply(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(edit_message_button)).clicked(actions) {
+        else if self.button(ids!(edit_message_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::Edit(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(pin_button)).clicked(actions) {
+        else if self.button(ids!(pin_button)).clicked(actions) {
             if details.abilities.contains(MessageAbilities::CanPin) {
                 cx.widget_action(
-                    details.room_screen_widget_uid, 
+                    details.room_screen_widget_uid,
+                    &scope.path,
                     MessageAction::Pin(details.clone()),
                 );
             } else if details.abilities.contains(MessageAbilities::CanUnpin) {
                 cx.widget_action(
-                    details.room_screen_widget_uid, 
+                    details.room_screen_widget_uid,
+                    &scope.path,
                     MessageAction::Unpin(details.clone()),
                 );
             }
             close_menu = true;
         }
-        else if self.button(cx, ids!(copy_text_button)).clicked(actions) {
+        else if self.button(ids!(copy_text_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::CopyText(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(copy_html_button)).clicked(actions) {
+        else if self.button(ids!(copy_html_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::CopyHtml(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(copy_link_to_message_button)).clicked(actions) {
+        else if self.button(ids!(copy_link_to_message_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::CopyLink(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(view_source_button)).clicked(actions) {
+        else if self.button(ids!(view_source_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::ViewSource(details.clone()),
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(jump_to_related_button)).clicked(actions) {
+        else if self.button(ids!(jump_to_related_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::JumpToRelated(details.clone()),
             );
             close_menu = true;
         }
-        // else if self.button(cx, ids!(report_button)).clicked(actions) {
+        // else if self.button(ids!(report_button)).clicked(actions) {
         //     cx.widget_action(
         //         details.room_screen_widget_uid,
         //         &scope.path,
@@ -450,9 +475,10 @@ impl WidgetMatchEvent for NewMessageContextMenu {
         //     );
         //    close_menu = true;
         // }
-        else if self.button(cx, ids!(delete_button)).clicked(actions) {
+        else if self.button(ids!(delete_button)).clicked(actions) {
             cx.widget_action(
-                details.room_screen_widget_uid, 
+                details.room_screen_widget_uid,
+                &scope.path,
                 MessageAction::Redact {
                     details: details.clone(),
                     // TODO: show a Modal to confirm deletion, and get the reason.
@@ -495,17 +521,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(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));
+        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));
 
         // Determine which buttons should be shown.
         // Note that some buttons are always enabled:
@@ -525,10 +551,10 @@ impl NewMessageContextMenu {
         let show_divider_before_report_delete = show_delete; // || show_report;
 
         // Actually set the buttons' visibility.
-        self.view.view(cx, ids!(react_view)).set_visible(cx, show_react);
+        self.view.view(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(cx, ids!(divider_after_react_reply)).set_visible(cx, show_divider_after_react_reply);
+        self.view.view(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");
@@ -542,7 +568,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(cx, ids!(divider_before_report_delete)).set_visible(cx, show_divider_before_report_delete);
+        self.view.view(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);
 
@@ -560,8 +586,8 @@ impl NewMessageContextMenu {
         delete_button.reset_hover(cx);
 
         // Reset reaction input view stuff.
-        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.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.redraw(cx);
 
diff --git a/src/home/room_context_menu.rs b/src/home/room_context_menu.rs
index c55b7fa54..65a258f75 100644
--- a/src/home/room_context_menu.rs
+++ b/src/home/room_context_menu.rs
@@ -8,109 +8,115 @@ use crate::{home::invite_modal::InviteModalAction, shared::popup_list::{PopupKin
 const BUTTON_HEIGHT: f64 = 35.0;
 const MENU_WIDTH: f64 = 215.0;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::helpers::*;
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::*;
 
-    mod.widgets.ROOM_CONTEXT_MENU_BUTTON_HEIGHT = 35
-    mod.widgets.ROOM_CONTEXT_MENU_WIDTH = 215
+    BUTTON_HEIGHT = 35
+    MENU_WIDTH = 215
 
-    mod.widgets.RoomContextMenuButton = RobrixIconButton {
-        height: (mod.widgets.ROOM_CONTEXT_MENU_BUTTON_HEIGHT)
+    ContextMenuButton = <RobrixIconButton> {
+        height: (BUTTON_HEIGHT)
         width: Fill,
         margin: 0,
-        icon_walk: Walk{width: 16, height: 16, margin: Inset{right: 3}}
-        // Override the blue default back to neutral for context menu items
-        draw_bg +: { color: (COLOR_PRIMARY), color_hover: #EBEBEB, color_down: #DCDCDC }
-        draw_icon.color: #000
-        draw_text +: { color: #000, color_hover: #000, color_down: #000 }
+        icon_walk: {width: 16, height: 16, margin: {right: 3}}
     }
 
-    mod.widgets.RoomContextMenu = set_type_default() do #(RoomContextMenu::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub RoomContextMenu = {{RoomContextMenu}} {
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        cursor: MouseCursor.Default,
-        align: Align{x: 0, y: 0}
+        cursor: Default,
+        align: {x: 0, y: 0}
 
         show_bg: true
-        draw_bg +: {
-            color: #0000004d
+        draw_bg: {
+            fn pixel(self) -> vec4 {
+                return vec4(0., 0., 0., 0.3)
+            }
         }
 
-        main_content := RoundedView {
+        main_content = <RoundedView> {
             flow: Down
-            width: (mod.widgets.ROOM_CONTEXT_MENU_WIDTH),
+            width: (MENU_WIDTH),
             height: Fit,
             padding: 5
             spacing: 0,
-            align: Align{x: 0, y: 0}
+            align: {x: 0, y: 0}
 
             show_bg: true
-            draw_bg +: {
-                color: (COLOR_PRIMARY)
+            draw_bg: {
+                color: #fff
                 border_radius: 5.0
                 border_size: 0.5
                 border_color: #888
             }
 
-            mark_unread_button := mod.widgets.RoomContextMenuButton {
-                draw_icon +: { svg: (ICON_CHECKMARK) }
+            mark_unread_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_CHECKMARK) }
                 text: "Mark as Unread"
             }
 
-            favorite_button := mod.widgets.RoomContextMenuButton {
-                draw_icon +: { svg: (ICON_PIN) }
+            favorite_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_PIN) }
                 text: "Favorite"
             }
 
-            priority_button := mod.widgets.RoomContextMenuButton {
-                draw_icon +: { svg: (ICON_TOMBSTONE) } 
+            priority_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_TOMBSTONE) }
                 text: "Set Low Priority"
             }
 
-            copy_link_button := mod.widgets.RoomContextMenuButton {
-                draw_icon +: { svg: (ICON_LINK) }
+            copy_link_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_LINK) }
                 text: "Copy Link to Room"
             }
             
-            divider1 := LineH {
-                margin: Inset{top: 3, bottom: 3}
+            divider1 = <LineH> {
+                margin: {top: 3, bottom: 3}
                 width: Fill,
             }
 
-            room_settings_button := mod.widgets.RoomContextMenuButton {
-                draw_icon +: { svg: (ICON_SETTINGS) }
+            room_settings_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_SETTINGS) }
                 text: "Settings"
             }
 
-            notifications_button := mod.widgets.RoomContextMenuButton {
+            notifications_button = <ContextMenuButton> {
                 // TODO: use a proper bell icon
-                draw_icon +: { svg: (ICON_INFO) }
+                draw_icon: { svg_file: (ICON_INFO) }
                 text: "Notifications"
             }
 
-            invite_button := mod.widgets.RoomContextMenuButton {
-                draw_icon +: { svg: (ICON_ADD_USER) }
+            invite_button = <ContextMenuButton> {
+                draw_icon: { svg_file: (ICON_ADD_USER) }
                 text: "Invite"
             }
 
-            divider2 := LineH {
-                margin: Inset{top: 3, bottom: 3}
+            divider2 = <LineH> {
+                margin: {top: 3, bottom: 3}
                 width: Fill,
             }
 
-            leave_button := RobrixNegativeIconButton {
-                height: (mod.widgets.ROOM_CONTEXT_MENU_BUTTON_HEIGHT)
-                width: Fill,
-                margin: 0,
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{right: 3}}
-                draw_icon.svg: (ICON_LOGOUT)
+            leave_button = <ContextMenuButton> {
+                draw_icon: {
+                    svg_file: (ICON_LOGOUT)
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                draw_bg: {
+                    border_color: (COLOR_FG_DANGER_RED),
+                    color: (COLOR_BG_DANGER_RED)
+                }
                 text: "Leave Room"
+                draw_text:{
+                    color: (COLOR_FG_DANGER_RED),
+                }
             }
         }
     }
@@ -127,18 +133,16 @@ 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, Default, Debug)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum RoomContextMenuAction {
     Notifications(OwnedRoomId),
     OpenRoomSettings(OwnedRoomId),
-    #[default]
     None,
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct RoomContextMenu {
     #[deref] view: View,
-    #[source] source: ScriptObjectRef,
     #[rust] details: Option<RoomContextMenuDetails>,
 }
 
@@ -161,7 +165,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(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
+                     !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                  Hit::FingerScroll(_) => true,
                 _ => false,
@@ -182,28 +186,28 @@ impl WidgetMatchEvent for RoomContextMenu {
         let Some(details) = self.details.as_ref() else { return };
         let mut close_menu = false;
         
-        if self.button(cx, ids!(mark_unread_button)).clicked(actions) {
+        if self.button(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(cx, ids!(favorite_button)).clicked(actions) {
+        else if self.button(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(cx, ids!(priority_button)).clicked(actions) {
+        else if self.button(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(cx, ids!(copy_link_button)).clicked(actions) {
+        else if self.button(ids!(copy_link_button)).clicked(actions) {
             submit_async_request(MatrixRequest::GenerateMatrixLink {
                 room_id: details.room_name_id.room_id().clone(),
                 event_id: None,
@@ -212,7 +216,7 @@ impl WidgetMatchEvent for RoomContextMenu {
             });
             close_menu = true;
         }
-         else if self.button(cx, ids!(room_settings_button)).clicked(actions) {
+         else if self.button(ids!(room_settings_button)).clicked(actions) {
             // TODO: handle/implement this
             enqueue_popup_notification(
                 "The room settings page is not yet implemented.",
@@ -221,7 +225,7 @@ impl WidgetMatchEvent for RoomContextMenu {
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(notifications_button)).clicked(actions) {
+        else if self.button(ids!(notifications_button)).clicked(actions) {
             // TODO: handle/implement this
             enqueue_popup_notification(
                 "The room notifications page is not yet implemented.",
@@ -230,11 +234,11 @@ impl WidgetMatchEvent for RoomContextMenu {
             );
             close_menu = true;
         }
-        else if self.button(cx, ids!(invite_button)).clicked(actions) {
+        else if self.button(ids!(invite_button)).clicked(actions) {
             cx.action(InviteModalAction::Open(details.room_name_id.clone()));
             close_menu = true;
         }
-        else if self.button(cx, ids!(leave_button)).clicked(actions) {
+        else if self.button(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());
@@ -265,21 +269,21 @@ impl RoomContextMenu {
     }
     
     fn update_buttons(&mut self, cx: &mut Cx, details: &RoomContextMenuDetails) -> f64 {
-        let mark_unread_button = self.button(cx, ids!(mark_unread_button));
+        let mark_unread_button = self.button(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(cx, ids!(favorite_button));
+        let favorite_button = self.button(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(cx, ids!(priority_button));
+        let priority_button = self.button(ids!(priority_button));
         if details.is_low_priority {
             priority_button.set_text(cx, "Un-set Low Priority");
         } else {
@@ -290,11 +294,11 @@ impl RoomContextMenu {
         mark_unread_button.reset_hover(cx);
         favorite_button.reset_hover(cx);
         priority_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.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.redraw(cx);
         
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index d2bad9726..60fb7557d 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -5,7 +5,6 @@ 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;
 
@@ -16,40 +15,43 @@ use std::cmp;
 /// and its accompanying tooltip.
 pub const MAX_VISIBLE_AVATARS_IN_READ_RECEIPT: usize = 3;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::avatar::*;
+    use crate::shared::styles::*;
 
-    mod.widgets.AvatarRow = #(AvatarRow::register_widget(vm)) {
-        align: Align{y: 0.5},
-        avatar_template: Avatar {
+    pub AvatarRow = {{AvatarRow}} {
+        align: {y: 0.5},
+        avatar_template: <Avatar> {
             width: 15.0,
             height: 15.0,
-            text_view +: {
-                text +: {
-                    draw_text +: {
-                        text_style: theme.font_regular { font_size: 6.0 }
+            text_view = {
+                text = {
+                    draw_text: {
+                        text_style: { font_size: 6.0 }
                     }
                 }
             }
         }
-        margin: Inset{top: 5, right: 0},
+        margin: {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(Script, Widget, ScriptHook)]
+#[derive(Live, Widget, LiveHook)]
 pub struct AvatarRow {
     #[redraw]
     #[live]
@@ -85,7 +87,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;
         };
@@ -100,7 +102,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,  RoomScreenTooltipActions::HoverOut);
+                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
                 false
             }
             _ => false,
@@ -108,7 +110,8 @@ impl Widget for AvatarRow {
         if should_hover_in {
             if let Some(read_receipts) = &self.read_receipts {
                 cx.widget_action(
-                    uid, 
+                    uid,
+                    &scope.path,
                     RoomScreenTooltipActions::HoverInReadReceipt {
                         widget_rect,
                         read_receipts: read_receipts.clone(),
@@ -165,11 +168,11 @@ impl AvatarRow {
             self.buttons.clear();
             for _ in 0..cmp::min(MAX_VISIBLE_AVATARS_IN_READ_RECEIPT, receipts_map.len()) {
                 self.buttons.push((
-                    widget_ref_from_live_ptr(cx, self.avatar_template).as_avatar(),
+                    WidgetRef::new_from_ptr(cx, self.avatar_template).as_avatar(),
                     false,
                 ));
             }
-            self.label = Some(widget_ref_from_live_ptr(cx, self.plus_template).as_label());
+            self.label = Some(WidgetRef::new_from_ptr(cx, self.plus_template).as_label());
             self.read_receipts = Some(receipts_map.clone());
         }
         for ((avatar_ref, drawn), (user_id, _)) in
@@ -232,7 +235,7 @@ pub fn populate_read_receipts(
     timeline_kind: &TimelineKind,
     event_tl_item: &EventTimelineItem,
 ) {
-    item.avatar_row(cx, ids!(avatar_row)).set_avatar_row(
+    item.avatar_row(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 b9db6d0ed..dc42a462e 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -30,9 +30,9 @@ use crate::{
         user_profile::{ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     },
-    room::{BasicRoomDetails, room_input_bar::{RoomInputBarState, RoomInputBarWidgetRefExt}, typing_notice::TypingNoticeWidgetExt},
+    room::{BasicRoomDetails, room_input_bar::RoomInputBarState, typing_notice::TypingNoticeWidgetExt},
     shared::{
-        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
+        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
     },
     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,90 +63,110 @@ 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);
 
 
-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
+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
 
     // An empty view that takes up no space in the portal list.
-    mod.widgets.Empty = View { }
+    Empty = <View> { }
 
     // A summary at the bottom of a message that is the root of a thread.
-    mod.widgets.ThreadRootSummary = RoundedView {
+    ThreadRootSummary = <RoundedView> {
         visible: false
         width: Fill,
         height: Fit
         flow: Right,
-        align: Align{x: 0.0, y: 0.5}
+        align: {x: 0.0, y: 0.5}
         spacing: 5.0
-        margin: Inset{ top: 5.0 }
+        margin: { top: 5.0 }
         padding: 12,
-        cursor: MouseCursor.Hand
+        cursor: Hand
 
         show_bg: true
-        draw_bg +: {
-            color: (mod.widgets.COLOR_THREAD_SUMMARY_BG)
+        draw_bg: {
+            color: (COLOR_THREAD_SUMMARY_BG)
             border_radius: 4.0
             border_size: 1.5
-            border_color: (mod.widgets.COLOR_THREAD_SUMMARY_BORDER)
+            border_color: (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: (mod.widgets.COLOR_THREAD_SUMMARY_REPLY_COUNT)
+            draw_text: {
+                text_style: <USERNAME_TEXT_STYLE> { font_size: 11 }
+                color: (COLOR_THREAD_SUMMARY_REPLY_COUNT)
             }
             text: ""
         }
 
-        Icon {
+        <Icon> {
             width: Fit, height: Fit,
-            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)
+            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)
             }
-            icon_walk: Walk{ width: 25, height: 25, margin: Inset{top: 3, right: 7} }
+            icon_walk: { width: 25, height: 25, margin: {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.
-    mod.widgets.Message = set_type_default() do #(Message::register_widget(vm)) {
-
+    Message = {{Message}} {
         width: Fill,
         height: Fit,
         margin: 0.0
         flow: Down,
-        cursor: MouseCursor.Default,
+        cursor: Default,
         padding: 0.0,
         spacing: 0.0
 
         show_bg: true
-        draw_bg +: {
-            highlight: instance(0.0)
-            hover: instance(0.0)
-            color: instance((COLOR_PRIMARY)) // default color)
+        draw_bg: {
+            instance highlight: 0.0
+            instance hover: 0.0
+            color: #ffffff  // default color
 
-            mentions_bar_color: instance((COLOR_PRIMARY))
-            mentions_bar_width: instance(4.0)
+            instance mentions_bar_color: #ffffff
+            instance mentions_bar_width: 4.0
 
-            pixel: fn() {
+            fn pixel(self) -> vec4 {
                 let base_color = mix(
                     self.color,
                     #fafafa,
@@ -159,7 +179,7 @@ script_mod! {
                     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);
@@ -173,30 +193,30 @@ script_mod! {
             }
         }
 
-        animator: Animator{
-            highlight: {
-                default: @off
-                off: AnimatorState{
+        animator: {
+            highlight = {
+                default: off
+                off = {
                     redraw: true,
                     from: { all: Forward {duration: 2.0} }
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: { draw_bg: {highlight: 0.0} }
                 }
-                on: AnimatorState{
+                on = {
                     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: AnimatorState{
+            hover = {
+                default: off
+                off = {
                     redraw: true,
                     from: { all: Snap }
                     apply: { draw_bg: {hover: 0.0} }
                 }
-                on: AnimatorState{
+                on = {
                     redraw: true,
                     from: { all: Snap }
                     apply: { draw_bg: {hover: 1.0} }
@@ -205,138 +225,136 @@ script_mod! {
         }
 
         // A preview of the earlier message that this message was in reply to.
-        replied_to_message := mod.widgets.RepliedToMessage {
+        replied_to_message = <RepliedToMessage> {
             flow: Right
-            margin: Inset{ bottom: 3, top: 10 }
-            replied_to_message_content +: {
-                margin +: { left: 29 }
-                padding +: { bottom: 10 }
+            margin: { bottom: 3, top: 10 }
+            replied_to_message_content = {
+                margin: { left: 29 }
+                padding: { bottom: 10 }
             }
         }
 
-        body := View {
+        body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
-            padding: Inset{top: 0, bottom: 10, left: 10, right: 10},
+            padding: {top: 0, bottom: 10, left: 10, right: 10},
 
-            profile := View {
-                align: Align{x: 0.5, y: 0.0} // centered horizontally, top aligned
+            profile = <View> {
+                align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 65.0,
                 height: Fit,
-                margin: Inset{top: 4.5, right: 10}
+                margin: {top: 4.5, right: 10}
                 flow: Down,
-                avatar := Avatar {
+                avatar = <Avatar> {
                     width: 48,
                     height: 48,
                 }
-                timestamp := Timestamp {
-                    margin: Inset{ top: 5.9 }
+                timestamp = <Timestamp> {
+                    margin: { 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: Inset{bottom: 9.0, top: 20.0, right: 10.0,}
-                        draw_text +: {
-                            text_style: USERNAME_TEXT_STYLE {},
+                        margin: {bottom: 9.0, top: 20.0, right: 10.0,}
+                        draw_text: {
+                            text_style: <USERNAME_TEXT_STYLE> {},
                             color: (USERNAME_TEXT_COLOR)
+                            wrap: Ellipsis,
                         }
                         text: "<Username not available>"
                     }
                 }
 
-                message := HtmlOrPlaintext { }
-                link_preview_view := mod.widgets.LinkPreview {}
-                View {
+                message = <HtmlOrPlaintext> { }
+                link_preview_view = <LinkPreview> {}
+                <View> {
                     width: Fill,
                     height: Fit
                     flow: Right,
-                    reaction_list := mod.widgets.ReactionList { }
-                    avatar_row := mod.widgets.AvatarRow {}
+                    reaction_list = <ReactionList> { }
+                    avatar_row = <AvatarRow> {}
                 }
-                thread_root_summary := mod.widgets.ThreadRootSummary {}
+                thread_root_summary = <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.
-    mod.widgets.CondensedMessage = mod.widgets.Message {
-        padding: Inset{ top: 2.0, bottom: 2.0 }
-        replied_to_message +: {
-            replied_to_message_content +: {
-                margin: Inset{ left: 74, bottom: 5.0 }
+    CondensedMessage = <Message> {
+        padding: { top: 2.0, bottom: 2.0 }
+        replied_to_message = <RepliedToMessage> {
+            replied_to_message_content = {
+                margin: { left: 74, bottom: 5.0 }
             }
         }
-        body := View {
-            width: Fill,
-            height: Fit
-            flow: Right,
-            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
+        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
                 width: 65.0,
                 height: Fit,
                 flow: Down,
-                timestamp := Timestamp {
-                    margin: Inset{top: 2.5}
+                timestamp = <Timestamp> {
+                    margin: {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: Inset{ left: 10.0 }
+                padding: { left: 10.0 }
 
-                message := HtmlOrPlaintext { }
-                link_preview_view := mod.widgets.LinkPreview {}
-                View {
+                message = <HtmlOrPlaintext> { }
+                link_preview_view = <LinkPreview> {}
+                <View> {
                     width: Fill,
                     height: Fit
                     flow: Right,
-                    reaction_list := mod.widgets.ReactionList { }
-                    avatar_row := mod.widgets.AvatarRow {}
+                    reaction_list = <ReactionList> { }
+                    avatar_row = <AvatarRow> {}
                 }
-                thread_root_summary := mod.widgets.ThreadRootSummary {}
+                thread_root_summary = <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.
-    mod.widgets.ImageMessage = mod.widgets.Message {
-        body +: {
-            content +: {
+    ImageMessage = <Message> {
+        body = {
+            content = {
                 width: Fill,
                 height: Fit
-                padding: Inset{ left: 10.0 }
+                padding: { left: 10.0 }
 
-                message := TextOrImage { }
-                View {
+                message = <TextOrImage> { }
+                <View> {
                     width: Fill,
                     height: Fit,
                     flow: Right,
-                    reaction_list := mod.widgets.ReactionList { }
-                    avatar_row := mod.widgets.AvatarRow {}
+                    reaction_list = <ReactionList> { }
+                    avatar_row = <AvatarRow> {}
                 }
-                thread_root_summary := mod.widgets.ThreadRootSummary {}
+                thread_root_summary = <ThreadRootSummary> {}
             }
 
         }
@@ -345,18 +363,18 @@ script_mod! {
     // 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.
-    mod.widgets.CondensedImageMessage = mod.widgets.CondensedMessage {
-        body +: {
-            content +: {
-                message := TextOrImage { }
-                View {
+    CondensedImageMessage = <CondensedMessage> {
+        body = {
+            content = {
+                message = <TextOrImage> { }
+                <View> {
                     width: Fill,
                     height: Fit,
                     flow: Right,
-                    reaction_list := mod.widgets.ReactionList { }
-                    avatar_row := mod.widgets.AvatarRow {}
+                    reaction_list = <ReactionList> { }
+                    avatar_row = <AvatarRow> {}
                 }
-                thread_root_summary := mod.widgets.ThreadRootSummary {}
+                thread_root_summary = <ThreadRootSummary> {}
             }
         }
     }
@@ -364,153 +382,161 @@ script_mod! {
 
     // The view used for each state event (non-messages) in a room's timeline.
     // The timestamp, profile picture, and text are all very small.
-    mod.widgets.SmallStateEvent = View {
+    SmallStateEvent = <View> {
         width: Fill,
         height: Fit,
         flow: Right,
-        margin: Inset{ top: 4.0, bottom: 4.0}
-        padding: Inset{ top: 1.0, bottom: 1.0, right: 10.0 }
+        margin: { top: 4.0, bottom: 4.0}
+        padding: { top: 1.0, bottom: 1.0, right: 10.0 }
         spacing: 0.0
-        cursor: MouseCursor.Default
+        cursor: Default
 
-        body := View {
+        body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
-            padding: Inset{ left: 7.0, top: 2.0, bottom: 2.0 }
+            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
             spacing: 5.0
 
-            left_container := View {
-                align: Align{x: 0.5, y: 0}
+            left_container = <View> {
+                align: {x: 0.5, y: 0}
                 width: 70.0,
                 height: Fit
 
-                timestamp := Timestamp {
-                    margin: Inset{top: 3}
+                timestamp = <Timestamp> {
+                    margin: {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 := RobrixPositiveIconButton {
+            invite_user_button = <RobrixIconButton> {
                 visible: false
-                margin: Inset{ top: -1.5, left: 2, right: 2}
-                padding: Inset{top: 4, bottom: 4, left: 9, right: 9}
-                draw_bg +: {
+                margin: { top: -1.5, left: 2, right: 2}
+                padding: {top: 4, bottom: 4, left: 9, right: 9}
+                draw_bg: {
+                    color: (COLOR_BG_ACCEPT_GREEN)
                     border_size: 0.75
+                    border_color: (COLOR_FG_ACCEPT_GREEN)
                 }
-                draw_icon.svg: (ICON_ADD_USER)
-                draw_text.text_style: SMALL_STATE_TEXT_STYLE {}
-                icon_walk: Walk{width: 15, height: Fit, margin: Inset{right: -4}}
+                draw_icon: {
+                    svg_file: (ICON_ADD_USER)
+                    color: (COLOR_FG_ACCEPT_GREEN)
+                }
+                draw_text: {
+                    color: (COLOR_FG_ACCEPT_GREEN)
+                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                }
+                icon_walk: {width: 15, height: Fit, margin: {right: -4}}
                 text: "Invite to Room"
             }
 
-            content := Label {
+            content = <Label> {
                 width: Fill,
                 height: Fit
-                flow: Flow.Right{wrap: true},
-                margin: Inset{top: 2.5}
-                padding: Inset{ top: 0.0, bottom: 0.0, left: 0.0, right: 0.0 }
-                draw_text +: {
-                    text_style: SMALL_STATE_TEXT_STYLE {},
+                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> {},
                     color: (SMALL_STATE_TEXT_COLOR)
                 }
                 text: ""
             }
 
-            avatar_row := mod.widgets.AvatarRow {}
+            avatar_row = <AvatarRow> {}
         }
     }
 
 
     // The view used for each day divider in a room's timeline.
     // The date text is centered between two horizontal lines.
-    mod.widgets.DateDivider = View {
+    DateDivider = <View> {
         width: Fill,
         height: Fit,
-        margin: Inset{top: 7.0, bottom: 7.0}
+        margin: {top: 7.0, bottom: 7.0}
         flow: Right,
-        padding: Inset{left: 7.0, right: 7.0},
+        padding: {left: 7.0, right: 7.0},
         spacing: 0.0,
-        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
+        align: {x: 0.5, y: 0.5} // center horizontally and vertically
 
-        left_line := LineH { }
+        left_line = <LineH> { }
 
-        date := Label {
-            padding: Inset{left: 7.0, right: 7.0}
-            draw_text +: {
-                text_style: TEXT_SUB {},
+        date = <Label> {
+            padding: {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.
-    mod.widgets.ReadMarker = mod.widgets.DateDivider {
-        left_line := LineH {
-            draw_bg.color: (mod.widgets.COLOR_READ_MARKER)
+    ReadMarker = <DateDivider> {
+        left_line = {
+            draw_bg: {color: (COLOR_READ_MARKER)}
         }
 
-        date := Label {
-            draw_text.color: (mod.widgets.COLOR_READ_MARKER)
+        date = {
+            draw_text: {
+                color: (COLOR_READ_MARKER)
+            }
             text: "New Messages"
         }
 
-        right_line := LineH {
-            draw_bg.color: (mod.widgets.COLOR_READ_MARKER)
+        right_line = {
+            draw_bg: {color: (COLOR_READ_MARKER)}
         }
     }
 
 
     // The top space is used to display a loading message while the room is being paginated.
-    mod.widgets.TopSpace = SolidView {
+    TopSpace = <View> {
         visible: false,
         width: Fill,
         height: Fit,
-        align: Align{x: 0.5, y: 0}
+        align: {x: 0.5, y: 0}
         flow: Right,
         show_bg: true,
-        draw_bg.color: #xDAF5E5F0, // mostly opaque light green
+        draw_bg: {
+            color: #xDAF5E5F0, // mostly opaque light green
+        }
 
-        label := Label {
+        label = <Label> {
             width: Fill,
             height: Fit,
-            align: Align{x: 0.5, y: 0.5},
+            align: {x: 0.5, y: 0.5},
             flow: Right,
-            padding: Inset{ top: 10.0, bottom: 7.0, left: 15.0, right: 15.0 }
-            draw_text +: {
-                text_style: MESSAGE_TEXT_STYLE { font_size: 10 },
+            padding: { 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..."
         }
     }
 
-    mod.widgets.Timeline = View {
+    Timeline = <View> {
         width: Fill,
         height: Fill,
-        align: Align{x: 0.5, y: 0.0} // center horizontally, align to top vertically
+        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
@@ -519,52 +545,53 @@ script_mod! {
             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 := mod.widgets.Message {}
-            CondensedMessage := mod.widgets.CondensedMessage {}
-            ImageMessage := mod.widgets.ImageMessage {}
-            CondensedImageMessage := mod.widgets.CondensedImageMessage {}
-            SmallStateEvent := mod.widgets.SmallStateEvent {}
-            Empty := mod.widgets.Empty {}
-            DateDivider := mod.widgets.DateDivider {}
-            ReadMarker := mod.widgets.ReadMarker {}
+            Message = <Message> {}
+            CondensedMessage = <CondensedMessage> {}
+            ImageMessage = <ImageMessage> {}
+            CondensedImageMessage = <CondensedImageMessage> {}
+            SmallStateEvent = <SmallStateEvent> {}
+            Empty = <Empty> {}
+            DateDivider = <DateDivider> {}
+            ReadMarker = <ReadMarker> {}
         }
 
         // 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> { }
     }
 
 
-    mod.widgets.RoomScreen = #(RoomScreen::register_widget(vm)) {
+    pub RoomScreen = {{RoomScreen}} {
         width: Fill, height: Fill,
-        cursor: MouseCursor.Default,
+        cursor: Default,
         flow: Down,
         spacing: 0.0
 
-        room_screen_wrapper := SolidView {
+        room_screen_wrapper = <View> {
             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 := mod.widgets.Timeline {
-                    // margin: Inset{bottom: 10}
+                timeline = <Timeline> {
+                    // margin: {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: Inset{top: 20}
+                room_input_bar = <RoomInputBar> {
+                    // margin: {top: 20}
                 }
             }
 
@@ -572,32 +599,32 @@ script_mod! {
             // 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 := mod.widgets.TopSpace { }
+            top_space = <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 := mod.widgets.UserProfileSlidingPane { }
+            user_profile_sliding_pane = <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: Align{x: 0.0, y: 0.0}
+            message_action_bar_popup = <PopupNotification> {
+                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> {}
                 }
             }
             */
@@ -606,7 +633,7 @@ script_mod! {
 }
 
 /// The main widget that displays a single Matrix room.
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct RoomScreen {
     #[deref] view: View,
 
@@ -623,7 +650,6 @@ pub struct RoomScreen {
     /// Whether or not all rooms have been loaded (received from the homeserver).
     #[rust] all_rooms_loaded: bool,
 }
-
 impl Drop for RoomScreen {
     fn drop(&mut self) {
         // This ensures that the `TimelineUiState` instance owned by this room is *always* returned
@@ -634,17 +660,14 @@ impl Drop for RoomScreen {
         self.hide_timeline();
     }
 }
-
-impl ScriptHook for RoomScreen {
-    fn on_after_reload(&mut self, vm: &mut ScriptVm) {
-        vm.with_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 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);
+        }
     }
 }
 
@@ -652,9 +675,9 @@ 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(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));
+        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));
 
         // Handle actions here before processing timeline updates.
         // Normally (in most other widgets), the order of event handling doesn't matter much.
@@ -664,7 +687,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(cx, ids!(reaction_list));
+                let reaction_list = wr.reaction_list(ids!(reaction_list));
                 if let RoomScreenTooltipActions::HoverInReactionButton {
                     widget_rect,
                     reaction_data,
@@ -687,7 +710,8 @@ 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, 
+                        room_screen_widget_uid,
+                        &scope.path,
                         TooltipAction::HoverIn {
                             text: tooltip_text,
                             widget_rect,
@@ -700,12 +724,13 @@ impl Widget for RoomScreen {
                 }
 
                 // Handle a hover-out action on the reaction list or avatar row.
-                let avatar_row_ref = wr.avatar_row(cx, ids!(avatar_row));
+                let avatar_row_ref = wr.avatar_row(ids!(avatar_row));
                 if reaction_list.hovered_out(actions)
                     || avatar_row_ref.hover_out(actions)
                 {
                     cx.widget_action(
-                        room_screen_widget_uid, 
+                        room_screen_widget_uid,
+                        &scope.path,
                         TooltipAction::HoverOut,
                     );
                 }
@@ -718,7 +743,8 @@ 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, 
+                        room_screen_widget_uid,
+                        &scope.path,
                         TooltipAction::HoverIn {
                             text: tooltip_text,
                             widget_rect,
@@ -731,7 +757,7 @@ impl Widget for RoomScreen {
                 }
 
                 // Handle an image within the message being clicked.
-                let content_message = wr.text_or_image(cx, ids!(content.message));
+                let content_message = wr.text_or_image(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(
@@ -744,9 +770,10 @@ impl Widget for RoomScreen {
                 }
 
                 // Handle the invite_user_button (in a SmallStateEvent) being clicked.
-                if wr.button(cx, ids!(invite_user_button)).clicked(actions) {
+                if wr.button(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);
                         let user_id = event_tl_item.sender().to_owned();
                         let username = if let TimelineDetails::Ready(profile) = event_tl_item.sender_profile() {
                             profile.display_name.as_deref().unwrap_or(user_id.as_str())
@@ -810,7 +837,8 @@ 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, 
+                            room_screen_widget_uid,
+                            &scope.path,
                             MessageAction::HighlightMessage(item_id),
                         );
                         tl.message_highlight_animation_state = MessageHighlightAnimationState::Off;
@@ -823,7 +851,7 @@ impl Widget for RoomScreen {
             /*
             // close message action bar if scrolled.
             if portal_list.scrolled(actions) {
-                let message_action_bar_popup = self.popup_notification(cx, ids!(message_action_bar_popup));
+                let message_action_bar_popup = self.popup_notification(ids!(message_action_bar_popup));
                 message_action_bar_popup.close(cx);
             }
             */
@@ -834,7 +862,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(cx, ids!(jump_to_bottom_button)).update_from_actions(
+            self.jump_to_bottom_button(ids!(jump_to_bottom_button)).update_from_actions(
                 cx,
                 &portal_list,
                 actions,
@@ -991,8 +1019,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(cx, ids!(message_action_bar_popup));
-                        let message_action_bar = message_action_bar_popup.message_action_bar(cx, ids!(message_action_bar));
+                        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));
 
                         // 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() {
@@ -1002,8 +1030,8 @@ impl Widget for RoomScreen {
                         }
                     }
                     MessageAction::ActionBarOpen { item_id, message_rect } => {
-                        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 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 margin_x = 50.;
 
@@ -1012,9 +1040,12 @@ impl Widget for RoomScreen {
                             message_rect.pos.y,
                         );
 
-                        script_apply_eval!(cx, message_action_bar_popup, {
-                            content +: { margin +: { left: #(coords.x), top: #(coords.y) } }
-                        });
+                        message_action_bar_popup.apply_over(
+                            cx,
+                            live! {
+                                content: { margin: { left: (coords.x), top: (coords.y) } }
+                            },
+                        );
 
                         if let Some(message_widget_uid) = action.as_widget_action().map(|a| a.widget_uid) {
                             message_action_bar_popup.open(cx);
@@ -1041,7 +1072,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(cx, ids!(restore_status_view));
+            let mut restore_status_view = self.view.restore_status_view(ids!(restore_status_view));
             restore_status_view.set_content(cx, self.all_rooms_loaded, room_name);
             return restore_status_view.draw(cx, scope);
         }
@@ -1180,7 +1211,7 @@ impl Widget for RoomScreen {
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
-                                item.label(cx, ids!(content)).set_text(cx, &format!("[Unsupported] {:?}", unhandled));
+                                item.label(ids!(content)).set_text(cx, &format!("[Unsupported] {:?}", unhandled));
                                 (item, ItemDrawnStatus::both_drawn())
                             }
                         }
@@ -1190,7 +1221,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(cx, ids!(date)).set_text(cx, &text);
+                            item.label(ids!(date)).set_text(cx, &text);
                             (item, ItemDrawnStatus::both_drawn())
                         }
                         TimelineItemKind::Virtual(VirtualTimelineItem::ReadMarker) => {
@@ -1239,8 +1270,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(cx, ids!(top_space));
-        let jump_to_bottom_button = self.jump_to_bottom_button(cx, ids!(jump_to_bottom_button));
+        let top_space = self.view(ids!(top_space));
+        let jump_to_bottom_button = self.jump_to_bottom_button(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 };
@@ -1324,7 +1355,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,  RoomScreenTooltipActions::HoverOut);
+                            cx.widget_action(ui, &HeapLiveIdPath::default(), RoomScreenTooltipActions::HoverOut);
                         }
                     }
                     //
@@ -1352,7 +1383,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(cx, ids!(loading_pane));
+                        let loading_pane = self.view.loading_pane(ids!(loading_pane));
                         let mut loading_pane_state = loading_pane.take_state();
                         if let LoadingPaneState::BackwardsPaginateUntilEvent {
                             events_paginated, target_event_id, ..
@@ -1403,7 +1434,7 @@ impl RoomScreen {
                         item.as_event()
                             .is_some_and(|ev| ev.event_id() == Some(&target_event_id))
                     );
-                    let loading_pane = self.view.loading_pane(cx, ids!(loading_pane));
+                    let loading_pane = self.view.loading_pane(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 {
@@ -1523,7 +1554,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(cx, ids!(room_input_bar))
+                    self.view.room_input_bar(ids!(room_input_bar))
                         .handle_edit_result(cx, timeline_event_id, result);
                 }
                 TimelineUpdate::PinResult { result, pin, .. } => {
@@ -1565,7 +1596,7 @@ impl RoomScreen {
                 }
                 TimelineUpdate::UserPowerLevels(user_power_levels) => {
                     tl.user_power = user_power_levels;
-                    self.view.room_input_bar(cx, ids!(room_input_bar))
+                    self.view.room_input_bar(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 {
@@ -1581,7 +1612,7 @@ impl RoomScreen {
                     tl.latest_own_user_receipt = Some(receipt);
                 }
                 TimelineUpdate::Tombstoned(successor_room_details) => {
-                    self.view.room_input_bar(cx, ids!(room_input_bar))
+                    self.view.room_input_bar(ids!(room_input_bar))
                         .update_tombstone_footer(cx, tl.kind.room_id(), Some(&successor_room_details));
                     tl.tombstone_info = Some(successor_room_details);
                 }
@@ -1603,7 +1634,7 @@ impl RoomScreen {
 
         if let Some(users) = typing_users {
             self.view
-                .typing_notice(cx, ids!(typing_notice))
+                .typing_notice(ids!(typing_notice))
                 .show_or_hide(cx, &users);
         }
 
@@ -1819,7 +1850,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(cx, ids!(room_input_bar))
+                        self.view.room_input_bar(ids!(room_input_bar))
                             .show_replying_to(cx, (event_tl_item, replied_to_info), &tl.kind);
                     }
                     else {
@@ -1838,7 +1869,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(cx, ids!(room_input_bar))
+                        self.view.room_input_bar(ids!(room_input_bar))
                             .show_editing_pane(
                                 cx,
                                 event_tl_item.clone(),
@@ -1866,7 +1897,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(cx, ids!(room_input_bar))
+                        self.view.room_input_bar(ids!(room_input_bar))
                             .show_editing_pane(
                                 cx,
                                 latest_sent_msg,
@@ -2039,11 +2070,12 @@ 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, 
+                        room_screen_widget_uid,
+                        &HeapLiveIdPath::default(),
                         RoomsListAction::Selected(SelectedRoom::Thread {
                             room_name_id,
                             thread_root_event_id: thread_root_event_id.clone(),
@@ -2278,7 +2310,7 @@ impl RoomScreen {
             self.is_loaded = is_loaded_now;
         }
 
-        self.view.restore_status_view(cx, ids!(restore_status_view)).set_visible(cx, !self.is_loaded);
+        self.view.restore_status_view(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
@@ -2302,7 +2334,7 @@ impl RoomScreen {
         }
 
         // Hide the typing notice view initially.
-        self.view(cx, ids!(typing_notice)).set_visible(cx, false);
+        self.view(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.
@@ -2347,7 +2379,7 @@ 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(cx, ids!(list)));
+        self.process_timeline_updates(cx, &self.portal_list(ids!(list)));
 
         self.redraw(cx);
     }
@@ -2390,12 +2422,10 @@ impl RoomScreen {
             return;
         };
 
-        let portal_list = self.child_by_path(ids!(timeline.list)).as_portal_list();
-        let room_input_bar = self.child_by_path(ids!(room_input_bar)).as_room_input_bar();
-        log!("Saving state for room {:?}: first_id: {:?}, scroll: {}", self.room_name_id, portal_list.first_id(), portal_list.scroll_position());
+        let portal_list = self.portal_list(ids!(list));
         let state = SavedState {
             first_index_and_scroll: Some((portal_list.first_id(), portal_list.scroll_position())),
-            room_input_bar_state: room_input_bar.save_state(),
+            room_input_bar_state: self.room_input_bar(ids!(room_input_bar)).save_state(),
         };
         tl.saved_state = state;
         // Clear room_members to avoid wasting memory (in case this room is never re-opened).
@@ -2413,22 +2443,18 @@ impl RoomScreen {
             first_index_and_scroll,
             room_input_bar_state,
         } = &mut tl_state.saved_state;
-
         // 1. Restore the position of the timeline.
-        let portal_list = self.portal_list(cx, ids!(timeline.list));
         if let Some((first_index, scroll_from_first_id)) = first_index_and_scroll {
-            log!("Restoring state for room {:?}: first_id: {:?}, scroll: {}", self.room_name_id, first_index, scroll_from_first_id);
-            portal_list.set_first_id_and_scroll(*first_index, *scroll_from_first_id);
-            portal_list.set_tail_range(false);
+            self.portal_list(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.
-            log!("Restoring state for room {:?}: first_id: None, scroll: None", self.room_name_id);
-            portal_list.set_tail_range(true);
+            self.portal_list(ids!(timeline.list)).set_tail_range(true);
         }
 
         // 2. Restore the state of the room input bar.
-        let room_input_bar = self.child_by_path(ids!(room_input_bar)).as_room_input_bar();
+        let room_input_bar = self.view.room_input_bar(ids!(room_input_bar));
         let saved_room_input_bar_state = std::mem::take(room_input_bar_state);
         room_input_bar.restore_state(
             cx,
@@ -2466,7 +2492,7 @@ impl RoomScreen {
 
         self.hide_timeline();
         // Reset the the state of the inner loading pane.
-        self.loading_pane(cx, ids!(loading_pane)).take_state();
+        self.loading_pane(ids!(loading_pane)).take_state();
 
         self.room_name_id = Some(room_name_id.clone());
         self.timeline_kind = Some(timeline_kind.clone());
@@ -2609,7 +2635,7 @@ pub struct RoomScreenProps {
 
 
 /// Actions for the room screen's tooltip.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum RoomScreenTooltipActions {
     /// Mouse over event when the mouse is over the read receipt.
     HoverInReadReceipt {
@@ -2627,7 +2653,6 @@ pub enum RoomScreenTooltipActions {
     },
     /// Mouse out event and clear tooltip.
     HoverOut,
-    #[default]
     None,
 }
 
@@ -2988,7 +3013,7 @@ 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 (automated bot message)
+    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
@@ -3026,16 +3051,12 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             body,
                             formatted.as_ref(),
-                            Some(&mut link_preview_ref),
+                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3056,23 +3077,24 @@ 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));
-                        // Apply gray color to all text styles for notice messages.
-                        let mut html_widget = html_or_plaintext_ref.html(cx, ids!(html_view.html));
-                        script_apply_eval!(cx, html_widget, {
-                            font_color: mod.widgets.COLOR_MESSAGE_NOTICE_TEXT,
-                            draw_block +: {
-                                quote_fg_color: mod.widgets.COLOR_MESSAGE_NOTICE_TEXT,
+                        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 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 link_preview_ref),
+                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3086,17 +3108,18 @@ 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));
-                        // Apply red color to all text styles for server notices.
-                        let mut html_widget = html_or_plaintext_ref.html(cx, ids!(html_view.html));
-                        script_apply_eval!(cx, html_widget, {
-                            font_color: mod.widgets.COLOR_FG_DANGER_RED
-                            draw_text +: { color: mod.widgets.COLOR_FG_DANGER_RED }
-                            draw_block +: {
-                                line_color: mod.widgets.COLOR_FG_DANGER_RED
-                                quote_fg_color: mod.widgets.COLOR_FG_DANGER_RED
+                        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 formatted = format!(
                             "<b>Server notice:</b> {}\n\n<i>Notice type:</i>: {}{}{}",
                             sn.body,
@@ -3108,8 +3131,6 @@ 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,
@@ -3118,7 +3139,7 @@ fn populate_message_view(
                                 format: MessageFormat::Html,
                                 body: formatted,
                             }),
-                            Some(&mut link_preview_ref),
+                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3139,7 +3160,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(cx, ids!(profile.avatar)).set_avatar_and_get_username(
+                        let (username, profile_drawn) = item.avatar(ids!(profile.avatar)).set_avatar_and_get_username(
                             cx,
                             timeline_kind,
                             event_tl_item.sender(),
@@ -3160,16 +3181,12 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             &body,
                             formatted.as_ref(),
-                            Some(&mut link_preview_ref),
+                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3191,10 +3208,9 @@ 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,
-                            &text_or_image_ref,
+                            &item.text_or_image(ids!(content.message)),
                             image_info,
                             image.source.clone(),
                             msg.body(),
@@ -3215,11 +3231,9 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             location,
                         );
                         new_drawn_status.content_drawn = is_location_fully_drawn;
@@ -3237,11 +3251,9 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             file_content,
                         );
                         (item, false)
@@ -3258,11 +3270,9 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             audio,
                         );
                         (item, false)
@@ -3279,11 +3289,9 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             video,
                         );
                         (item, false)
@@ -3309,17 +3317,13 @@ 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,
-                            &html_or_plaintext_ref,
+                            &item.html_or_plaintext(ids!(content.message)),
                             &verification.body,
                             Some(&formatted),
-                            Some(&mut link_preview_ref),
+                            Some(&mut item.link_preview(ids!(content.link_preview_view))),
                             Some(media_cache),
                             Some(link_preview_cache),
                         );
@@ -3332,7 +3336,7 @@ fn populate_message_view(
                     if existed && item_drawn_status.content_drawn {
                         (item, true)
                     } else {
-                        item.label(cx, ids!(content.message)).set_text(
+                        item.label(ids!(content.message)).set_text(
                             cx,
                             &format!("[Unsupported {:?}]", msg_like_content.kind),
                         );
@@ -3359,10 +3363,9 @@ 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,
-                        &text_or_image_ref,
+                        &item.text_or_image(ids!(content.message)),
                         Some(Box::new(image_info.clone())),
                         MediaSource::Plain(owned_mxc_url.clone()),
                         body,
@@ -3387,16 +3390,13 @@ 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));
-                // Apply a smaller font size for redacted messages.
-                let mut html_widget = html_or_plaintext_ref.html(cx, ids!(html_view.html));
-                script_apply_eval!(cx, html_widget, {
-                    font_size: mod.widgets.REDACTED_MESSAGE_FONT_SIZE
-                    text_style_normal +: { font_size: mod.widgets.REDACTED_MESSAGE_FONT_SIZE }
-                    text_style_italic +: { font_size: mod.widgets.REDACTED_MESSAGE_FONT_SIZE }
-                    text_style_bold +: { font_size: mod.widgets.REDACTED_MESSAGE_FONT_SIZE }
-                    text_style_bold_italic +: { font_size: mod.widgets.REDACTED_MESSAGE_FONT_SIZE }
-                    text_style_fixed +: { font_size: mod.widgets.REDACTED_MESSAGE_FONT_SIZE }
+                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)} }
+                    } }
                 });
                 new_drawn_status.content_drawn = populate_redacted_message_content(
                     cx,
@@ -3413,7 +3413,7 @@ fn populate_message_view(
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
-                item.label(cx, ids!(content.message)).set_text(
+                item.label(ids!(content.message)).set_text(
                     cx,
                     &format!("[Unsupported {:?}] ", other),
                 );
@@ -3428,7 +3428,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(cx, ids!(content.reaction_list)).set_list(
+        item.reaction_list(ids!(content.reaction_list)).set_list(
             cx,
             event_tl_item.content().reactions(),
             timeline_kind.clone(),
@@ -3438,7 +3438,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(cx, ids!(replied_to_message)),
+            &item.view(ids!(replied_to_message)),
             timeline_kind,
             msg_like_content.in_reply_to.as_ref(),
             event_tl_item.event_id(),
@@ -3493,11 +3493,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 mut username_label = item.label(cx, ids!(content.username));
+        let username_label = item.label(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(cx, ids!(profile.avatar)).set_avatar_and_get_username(
+                item.avatar(ids!(profile.avatar)).set_avatar_and_get_username(
                     cx,
                     timeline_kind,
                     event_tl_item.sender(),
@@ -3507,25 +3507,25 @@ fn populate_message_view(
                 )
             );
             if is_notice {
-                script_apply_eval!(cx, username_label, {
-                    draw_text +: {
-                        color: mod.widgets.COLOR_MESSAGE_NOTICE_TEXT
+                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(cx, ids!(profile.avatar));
+            let avatar = item.avatar(ids!(profile.avatar));
             avatar.show_text(cx, Some(COLOR_FG_DANGER_RED), None, "⚠");
             username_label.set_text(cx, "Server notice");
-            script_apply_eval!(cx, username_label, {
-                draw_text +: {
-                    color: (mod.widgets.COLOR_FG_DANGER_RED)
+            username_label.apply_over(cx, live!(
+                draw_text: {
+                    color: (COLOR_FG_DANGER_RED),
                 }
-            });
+            ));
             new_drawn_status.profile_drawn = true;
         }
     }
@@ -3537,12 +3537,12 @@ fn populate_message_view(
 
     // Set the timestamp.
     if let Some(dt) = unix_time_millis_to_datetime(ts_millis) {
-        item.timestamp(cx, ids!(profile.timestamp)).set_date_time(cx, dt);
+        item.timestamp(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(cx, ids!(profile.edited_indicator)).set_latest_edit(
+        item.edited_indicator(ids!(profile.edited_indicator)).set_latest_edit(
             cx,
             event_tl_item,
         );
@@ -3576,7 +3576,7 @@ fn populate_message_view(
             };
 
             log!("TSP signature state for event {:?} is {:?}", event_tl_item.event_id(), tsp_sign_state);
-            item.tsp_sign_indicator(cx, ids!(profile.tsp_sign_indicator))
+            item.tsp_sign_indicator(ids!(profile.tsp_sign_indicator))
                 .show_with_state(cx, tsp_sign_state);
         }
     }
@@ -3730,7 +3730,7 @@ fn populate_image_message_content(
                 fully_drawn = false;
             }
             (MediaCacheEntry::Failed(_status_code), _media_format) => {
-                if text_or_image_ref.view(cx, ids!(default_image_view)).visible() {
+                if text_or_image_ref.view(ids!(default_image_view)).visible() {
                     fully_drawn = true;
                     return;
                 }
@@ -4029,7 +4029,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(cx, ids!(replied_to_message_content.reply_preview_avatar))
+                        .avatar(ids!(replied_to_message_content.reply_preview_avatar))
                         .set_avatar_and_get_username(
                             cx,
                             timeline_kind,
@@ -4042,9 +4042,9 @@ fn draw_replied_to_message(
                 fully_drawn = is_avatar_fully_drawn;
 
                 replied_to_message_view
-                    .label(cx, ids!(replied_to_message_content.reply_preview_username))
+                    .label(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(cx, ids!(reply_preview_body));
+                let msg_body = replied_to_message_view.html_or_plaintext(ids!(reply_preview_body));
                 populate_preview_of_timeline_item(
                     cx,
                     &msg_body,
@@ -4056,26 +4056,26 @@ fn draw_replied_to_message(
             TimelineDetails::Error(_e) => {
                 fully_drawn = true;
                 replied_to_message_view
-                    .label(cx, ids!(replied_to_message_content.reply_preview_username))
+                    .label(ids!(replied_to_message_content.reply_preview_username))
                     .set_text(cx, "[Error fetching username]");
                 replied_to_message_view
-                    .avatar(cx, ids!(replied_to_message_content.reply_preview_avatar))
+                    .avatar(ids!(replied_to_message_content.reply_preview_avatar))
                     .show_text(cx, None, None, "?");
                 replied_to_message_view
-                    .html_or_plaintext(cx, ids!(replied_to_message_content.reply_preview_body))
+                    .html_or_plaintext(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(cx, ids!(replied_to_message_content.reply_preview_username))
+                    .label(ids!(replied_to_message_content.reply_preview_username))
                     .set_text(cx, "[Loading username...]");
                 replied_to_message_view
-                    .avatar(cx, ids!(replied_to_message_content.reply_preview_avatar))
+                    .avatar(ids!(replied_to_message_content.reply_preview_avatar))
                     .show_text(cx, None, None, "?");
                 replied_to_message_view
-                    .html_or_plaintext(cx, ids!(replied_to_message_content.reply_preview_body))
+                    .html_or_plaintext(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),
@@ -4114,7 +4114,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(cx, ids!(thread_root_summary));
+    let thread_summary_view = item.view(ids!(thread_root_summary));
     thread_summary_view.set_visible(cx, false); // hide by default
     let fully_drawn: bool;
 
@@ -4191,9 +4191,9 @@ fn populate_thread_root_summary(
         1 => Cow::Borrowed("1 reply"),
         n => Cow::Owned(format!("{n} replies"))
     };
-    item.label(cx, ids!(thread_summary_count))
+    item.label(ids!(thread_summary_count))
         .set_text(cx, &replies_count_text);
-    item.html(cx, ids!(thread_summary_latest))
+    item.html(ids!(thread_summary_latest))
         .set_text(cx, &latest_preview);
     fully_drawn
 }
@@ -4269,7 +4269,7 @@ impl SmallStateEventContent for EncryptedMessage {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(cx, ids!(content)).set_text(
+        item.label(ids!(content)).set_text(
             cx,
             &text_preview_of_encrypted_message(self).format_with(username, false),
         );
@@ -4291,7 +4291,7 @@ impl SmallStateEventContent for OtherMessageLike {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(cx, ids!(content)).set_text(
+        item.label(ids!(content)).set_text(
             cx,
             &text_preview_of_other_message_like(self).format_with(username, false),
         );
@@ -4314,7 +4314,7 @@ impl SmallStateEventContent for PollState {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(cx, ids!(content)).set_text(
+        item.label(ids!(content)).set_text(
             cx,
             self.fallback_text().unwrap_or_else(|| self.results().question).as_str(),
         );
@@ -4336,7 +4336,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(cx, ids!(content))
+            item.label(ids!(content))
                 .set_text(cx, &text_preview.format_with(username, false));
             new_drawn_status.content_drawn = true;
             item
@@ -4361,7 +4361,7 @@ impl SmallStateEventContent for MemberProfileChange {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(cx, ids!(content)).set_text(
+        item.label(ids!(content)).set_text(
             cx,
             &text_preview_of_member_profile_change(self, username, false)
                 .format_with(username, false),
@@ -4391,11 +4391,11 @@ impl SmallStateEventContent for RoomMembershipChange {
             );
         };
 
-        item.label(cx, ids!(content))
+        item.label(ids!(content))
             .set_text(cx, &preview.format_with(username, false));
 
         // The invite_user_button is only used for "Knocked" membership change events.
-        item.button(cx, ids!(invite_user_button)).set_visible(
+        item.button(ids!(invite_user_button)).set_visible(
             cx,
             matches!(self.change(), Some(MembershipChange::Knocked)),
         );
@@ -4438,7 +4438,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(cx, ids!(avatar));
+        let avatar_ref = item.avatar(ids!(avatar));
 
         let (username, profile_drawn) = avatar_ref.set_avatar_and_get_username(
             cx,
@@ -4450,7 +4450,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(cx, ids!(left_container.timestamp)).set_date_time(cx, dt);
+            item.timestamp(ids!(left_container.timestamp)).set_date_time(cx, dt);
         }
         new_drawn_status.profile_drawn = profile_drawn;
         username
@@ -4516,7 +4516,7 @@ pub enum InviteResultAction {
 
 
 /// Actions related to a specific message within a room timeline.
-#[derive(Clone, Default, Debug)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum MessageAction {
     /// The user clicked the "react" button on a message
     /// and wants to send the given `reaction` to that message.
@@ -4579,23 +4579,14 @@ 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(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct Message {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
 
     #[rust] details: Option<MessageDetails>,
 }
@@ -4606,7 +4597,7 @@ impl Widget for Message {
             self.redraw(cx);
         }
 
-        if !self.animator.is_track_animating(id!(highlight))
+        if !self.animator.is_track_animating(cx, ids!(highlight))
             && self.animator_in_state(cx, ids!(highlight.on))
         {
             self.animator_play(cx, ids!(highlight.off));
@@ -4617,11 +4608,12 @@ 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(cx, ids!(replied_to_message)).area()) {
+        match event.hits(cx, self.view(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, 
+                        details.room_screen_widget_uid,
+                        &scope.path,
                         MessageAction::OpenMessageContextMenu {
                             details: details.clone(),
                             abs_pos: fe.abs,
@@ -4631,7 +4623,8 @@ impl Widget for Message {
             }
             Hit::FingerLongPress(lp) => {
                 cx.widget_action(
-                    details.room_screen_widget_uid, 
+                    details.room_screen_widget_uid,
+                    &scope.path,
                     MessageAction::OpenMessageContextMenu {
                         details: details.clone(),
                         abs_pos: lp.abs,
@@ -4641,7 +4634,8 @@ 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, 
+                    details.room_screen_widget_uid,
+                    &scope.path,
                     MessageAction::JumpToRelated(details.clone()),
                 );
             }
@@ -4650,11 +4644,12 @@ 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(cx, ids!(thread_root_summary));
+            let thread_root_summary = self.view(ids!(thread_root_summary));
             let apply_hover = |cx: &mut Cx, bg_color: Vec4| {
-                let mut thread_root_summary_ref = thread_root_summary.clone();
-                script_apply_eval!(cx, thread_root_summary_ref, {
-                    draw_bg.color: #(bg_color)
+                thread_root_summary.apply_over(cx, live! {
+                    draw_bg: {
+                        color: (bg_color)
+                    }
                 });
             };
             match event.hits(cx, thread_root_summary.area()) {
@@ -4662,7 +4657,8 @@ 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, 
+                            details.room_screen_widget_uid,
+                            &scope.path,
                             MessageAction::OpenMessageContextMenu {
                                 details: details.clone(),
                                 abs_pos: fe.abs,
@@ -4678,7 +4674,8 @@ impl Widget for Message {
                 }
                 Hit::FingerLongPress(lp) => {
                     cx.widget_action(
-                        details.room_screen_widget_uid, 
+                        details.room_screen_widget_uid,
+                        &scope.path,
                         MessageAction::OpenMessageContextMenu {
                             details: details.clone(),
                             abs_pos: lp.abs,
@@ -4689,7 +4686,8 @@ 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, 
+                            details.room_screen_widget_uid,
+                            &scope.path,
                             MessageAction::OpenThread(thread_root_event_id.clone()),
                         );
                     }
@@ -4713,7 +4711,8 @@ 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, 
+                        details.room_screen_widget_uid,
+                        &scope.path,
                         MessageAction::OpenMessageContextMenu {
                             details: details.clone(),
                             abs_pos: fe.abs,
@@ -4723,7 +4722,8 @@ impl Widget for Message {
             }
             Hit::FingerLongPress(lp) => {
                 cx.widget_action(
-                    details.room_screen_widget_uid, 
+                    details.room_screen_widget_uid,
+                    &scope.path,
                     MessageAction::OpenMessageContextMenu {
                         details: details.clone(),
                         abs_pos: lp.abs,
@@ -4756,12 +4756,14 @@ 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) {
-            script_apply_eval!(cx, self, {
-                draw_bg +: {
-                    color: #ffffd1,
-                    mentions_bar_color: #ffd54f
-                }
-            });
+            self.view.apply_over(
+                cx, live!(
+                    draw_bg: {
+                        color: (vec4(1.0, 1.0, 0.82, 1.0))
+                        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 7cf7d5106..af426aaa4 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -76,60 +76,69 @@ pub fn clear_all_invited_rooms(_cx: &mut Cx) {
 }
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.RoomsListStatusLabel = View {
+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> {
         width: Fill, height: Fit,
         flow: Right,
-        align: Align{ x: 0.5, y: 0.5 }
+        align: { x: 0.5, y: 0.5 }
         padding: 15.0,
 
-        loading_spinner := LoadingSpinner {
+        loading_spinner = <LoadingSpinner> {
             visible: false,
             width: 20,
             height: 20,
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_ACTIVE_PRIMARY)
-                border_size: 3.0
+                border_size: 3.0,
             }
         }
 
-        label := Label {
+        label = <Label> {
             padding: 0
             width: Fill,
-            flow: Flow.Right{wrap: true},
-            align: Align{ x: 0.5, y: 0.5 }
-            draw_text +: {
+            flow: RightWrap,
+            align: { x: 0.5, y: 0.5 }
+            draw_text: {
+                wrap: Word,
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: REGULAR_TEXT {}
+                text_style: <REGULAR_TEXT>{}
             }
             text: "Loading rooms..."
         }
     }
 
-    mod.widgets.RoomsList = #(RoomsList::register_widget(vm)) {
+    pub RoomsList = {{RoomsList}} {
         width: Fill, height: Fill
         flow: Down
-        cursor: MouseCursor.Default,
+        cursor: 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: Inset{top: 5}
+            padding: {top: 5}
             spacing: 0.0
 
-            collapsible_header := CollapsibleHeader {}
-            rooms_list_entry := RoomsListEntry {}
-            empty := View {}
-            status_label := mod.widgets.RoomsListStatusLabel {}
-            bottom_filler := View {
+            collapsible_header = <CollapsibleHeader> {}
+            rooms_list_entry = <RoomsListEntry> {}
+            empty = <View> {}
+            status_label = <StatusLabel> {}
+            bottom_filler = <View> {
                 width: Fill,
                 height: 100.0,
             }
@@ -230,7 +239,7 @@ pub fn enqueue_rooms_list_update(update: RoomsListUpdate) {
 }
 
 /// Actions related to a single room in the RoomsList widget.
-#[derive(Debug, Clone, Default)]
+#[derive(Debug, Clone, DefaultNone)]
 pub enum RoomsListAction {
     /// A new room or space was selected.
     Selected(SelectedRoom),
@@ -248,17 +257,9 @@ 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.
 ///
@@ -388,7 +389,7 @@ struct SpaceMapValue {
     parent_chain: ParentChain,
 }
 
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct RoomsList {
     #[deref] view: View,
 
@@ -467,8 +468,8 @@ pub struct RoomsList {
     // #[rust] all_rooms_loaded: bool,
 }
 
-impl ScriptHook for RoomsList {
-    fn on_after_new(&mut self, _vm: &mut ScriptVm) {
+impl LiveHook for RoomsList {
+    fn after_new_from_doc(&mut self, _: &mut Cx) {
         self.invited_rooms = ALL_INVITED_ROOMS.with(Rc::clone);
     }
 }
@@ -513,7 +514,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() {
@@ -555,7 +556,8 @@ 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(), 
+                                self.widget_uid(),
+                                &scope.path,
                                 RoomsListAction::InviteAccepted {
                                     room_name_id: room.room_name_id.clone(),
                                 }
@@ -780,7 +782,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(cx, ids!(list));
+                    let portal_list = self.view.portal_list(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
@@ -919,7 +921,7 @@ impl RoomsList {
 
         self.update_status();
 
-        let portal_list = self.view.portal_list(cx, ids!(list));
+        let portal_list = self.view.portal_list(ids!(list));
         if reset_scroll {
             portal_list.set_first_id_and_scroll(0, 0.0);
         }
@@ -1184,7 +1186,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(cx, ids!(list)).was_scrolling(),
+            was_scrolling: self.view.portal_list(ids!(list)).was_scrolling(),
         };
         let rooms_list_actions = cx.capture_actions(
             |cx| self.view.handle_event(cx, event, &mut Scope::with_props(&props))
@@ -1207,7 +1209,8 @@ impl Widget for RoomsList {
 
                 self.current_active_room = Some(new_selected_room.clone());
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     RoomsListAction::Selected(new_selected_room),
                 );
                 self.redraw(cx);
@@ -1226,7 +1229,8 @@ impl Widget for RoomsList {
                     is_marked_unread: jr.is_marked_unread,
                 };
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     RoomsListAction::OpenRoomContextMenu { details, pos },
                 );
             }
@@ -1236,7 +1240,8 @@ 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(), 
+                    self.widget_uid(),
+                    &scope.path,
                     RoomsListAction::Selected(new_selected_space),
                 );
                 self.redraw(cx);
@@ -1278,7 +1283,7 @@ impl Widget for RoomsList {
                             }
 
                             self.selected_space = Some(space_name_id.clone());
-                            self.view.space_lobby_entry(cx, ids!(space_lobby_entry)).set_visible(cx, true);
+                            self.view.space_lobby_entry(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
@@ -1313,7 +1318,7 @@ impl Widget for RoomsList {
                         }
                         _ => {
                             self.selected_space = None;
-                            self.view.space_lobby_entry(cx, ids!(space_lobby_entry)).set_visible(cx, false);
+                            self.view.space_lobby_entry(ids!(space_lobby_entry)).set_visible(cx, false);
                         }
                     }
 
@@ -1509,7 +1514,10 @@ 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.label(cx, ids!(label)).set_text(cx, &self.status);
+                    item.as_view().apply_over(cx, live!{
+                        height: Fit,
+                        label = { text: (&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 d421a12ac..093c16803 100644
--- a/src/home/rooms_list_entry.rs
+++ b/src/home/rooms_list_entry.rs
@@ -9,183 +9,197 @@ use crate::{
 };
 
 use super::rooms_list::{InvitedRoomInfo, InviterInfo, JoinedRoomInfo, RoomsListScopeProps};
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::unread_badge::UnreadBadge;
 
     // A cancel icon to be displayed in the RoomsListEntry when the room is tombstoned.
-    mod.widgets.TombstoneIcon = View {
+    TombstoneIcon = <View> {
         width: Fit, height: Fit,
         visible: false,
 
-        Icon {
+        <Icon> {
             width: 19, height: 19,
-            align: Align{x: 0.5, y: 0.5}
-            draw_icon +: {
-                svg: (ICON_TOMBSTONE)
+            align: {x: 0.5, y: 0.5}
+            draw_icon: {
+                svg_file: (ICON_TOMBSTONE)
                 color: (COLOR_FG_DANGER_RED)
             }
-            icon_walk: Walk{ width: 15, height: 15 }
+            icon_walk: { width: 15, height: 15 }
         }
     }
 
-    mod.widgets.RoomName = Label {
+    RoomName = <Label> {
         width: Fill, height: Fit
-        flow: Flow.Right{wrap: false},
+        flow: Right, // do not wrap
         padding: 0,
-        draw_text +: {
+        draw_text:{
             color: #000,
-            text_style: USERNAME_TEXT_STYLE { font_size: 10. }
+            wrap: Ellipsis,
+            text_style: <USERNAME_TEXT_STYLE>{ font_size: 10. }
         }
         text: "[Room name unknown]"
     }
 
-    mod.widgets.RoomsListEntryTimestamp = Label {
-        padding: Inset{top: 1},
+    Timestamp = <Label> {
+        padding: {top: 1},
         width: Fit, height: Fit
-        flow: Flow.Right{wrap: false},
-        draw_text +: {
+        flow: Right, // do not wrap
+        draw_text:{
             color: (TIMESTAMP_TEXT_COLOR)
-            text_style: TIMESTAMP_TEXT_STYLE { font_size: 7.5 }
+            text_style: <TIMESTAMP_TEXT_STYLE>{
+                font_size: 7.5
+            },
         }
     }
 
-    mod.widgets.MessagePreview = View {
+    MessagePreview = <View> {
         width: Fill, height: Fit
-        latest_message := HtmlOrPlaintext {
-            html_view +: {
-                html +: {
-                    font_size: 9.3
-                    text_style_normal +: { font_size: 9.3 }
-                    text_style_italic +: { font_size: 9.3 }
-                    text_style_bold +: { font_size: 9.3 }
-                    text_style_bold_italic +: { font_size: 9.3 }
-                    text_style_fixed +: { font_size: 9.3 }
-                }
-            }
-            plaintext_view +: {
-                pt_label +: {
-                    draw_text +: {
-                        text_style: theme.font_regular { font_size: 9.5 },
+        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
+                                    }
+                                }
+                            }
+                        }
                     }
-                    text: "[No recent messages]"
                 }
-            }
+            } }
+            plaintext_view = { pt_label = {
+                draw_text: {
+                    text_style: { font_size: 9.5 },
+                }
+                text: "[No recent messages]"
+            } }
         }
     }
 
-    mod.widgets.RoomsListEntryContent = set_type_default() do #(RoomsListEntryContent::register_widget(vm)) {
-
+    RoomsListEntryContent = {{RoomsListEntryContent}} {
         flow: Right,
         spacing: 10,
         padding: 10,
         width: Fill, height: Fit
-
         show_bg: true
-        draw_bg +: {
-            active: instance(0.0)
-            color: instance(#0000)
-            color_selected: instance(COLOR_ACTIVE_PRIMARY)
-            border_color: instance(#0000)
-            border_size: uniform(0.0)
-            border_radius: uniform(4.0)
-            border_inset: uniform(vec4(0.0))
-
-            get_color: fn() -> vec4 {
-                return mix(self.color, self.color_selected, self.active)
+        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
             }
 
-            pixel: fn() {
-                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+            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.border_inset.x + self.border_size,
-                    self.border_inset.y + self.border_size,
-                    self.rect_size.x - (self.border_inset.x + self.border_inset.z + self.border_size * 2.0),
-                    self.rect_size.y - (self.border_inset.y + self.border_inset.w + self.border_size * 2.0),
+                    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.border_color, self.border_size)
+                    sdf.stroke(self.get_border_color(), self.border_size)
                 }
                 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}
-                    }
-                }
-            }
-        }
     }
 
-    mod.widgets.RoomsListEntry = #(RoomsListEntry::register_widget(vm)) {
+    pub RoomsListEntry = {{RoomsListEntry}} {
         flow: Down, height: Fit
-        cursor: MouseCursor.Default,
+        cursor: 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 := mod.widgets.RoomsListEntryContent {
-                align: Align{x: 0.5, y: 0.5}
+            OnlyIcon = <RoomsListEntryContent> {
+                align: {x: 0.5, y: 0.5}
                 padding: 5.
-                View {
+                <View> {
                     height: Fit
                     flow: Overlay
-                    align: Align{ x: 1.0 }
-                    avatar := Avatar {}
-                    unread_badge := UnreadBadge {}
-                    tombstone_icon := mod.widgets.TombstoneIcon {}
+                    align: { x: 1.0 }
+                    avatar = <Avatar> {}
+                    unread_badge = <UnreadBadge> {}
+                    tombstone_icon = <TombstoneIcon> {}
                 }
             }
-            IconAndName := mod.widgets.RoomsListEntryContent {
+            IconAndName = <RoomsListEntryContent> {
                 padding: 5.
-                align: Align{x: 0.5, y: 0.5}
-                avatar := Avatar {}
-                room_name := mod.widgets.RoomName {}
-                unread_badge := UnreadBadge {}
-                tombstone_icon := mod.widgets.TombstoneIcon {}
+                align: {x: 0.5, y: 0.5}
+                avatar = <Avatar> {}
+                room_name = <RoomName> {}
+                unread_badge = <UnreadBadge>  {}
+                tombstone_icon = <TombstoneIcon> {}
             }
-            FullPreview := mod.widgets.RoomsListEntryContent {
+            FullPreview = <RoomsListEntryContent> {
                 padding: 10
-                avatar := Avatar {}
-                View {
+                avatar = <Avatar> {}
+                <View> {
                     flow: Down
                     width: Fill, height: 56
-                    align: Align{ x: 0.0, y: 0.0 }
-                    top := View {
+                    align: { x: 0.0, y: 0.0 }
+                    top = <View> {
                         width: Fill, height: Fit,
                         spacing: 3,
                         flow: Right,
-                        room_name := mod.widgets.RoomName {}
-                        timestamp := mod.widgets.RoomsListEntryTimestamp { }
+                        room_name = <RoomName> {}
+                        timestamp = <Timestamp> { }
                     }
-                    bottom := View {
+                    bottom = <View> {
                         width: Fill, height: Fill,
                         spacing: 2,
                         flow: Right,
-                        preview := mod.widgets.MessagePreview {
-                            margin: Inset{ top: 2.5 }
+                        preview = <MessagePreview> {
+                            margin: { top: 2.5 }
                         }
-                        View {
+                        <View> {
                             width: Fit, height: Fit
-                            align: Align{ x: 1.0 }
-                            unread_badge := UnreadBadge {}
-                            tombstone_icon := mod.widgets.TombstoneIcon {}
+                            align: { x: 1.0 }
+                            unread_badge = <UnreadBadge> {}
+                            tombstone_icon = <TombstoneIcon> {}
                         }
                     }
                 }
@@ -195,37 +209,29 @@ script_mod! {
 }
 
 /// An entry in the rooms list.
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct RoomsListEntry {
     #[deref] view: View,
     #[rust] room_id: Option<OwnedRoomId>,
 }
 
-impl ScriptHook for RoomsListEntry {
-    fn on_after_new(&mut self, vm: &mut ScriptVm) {
-        vm.with_cx_mut(|cx| {
-            self.set_adaptive_variant_selector(cx);
-        })
-    }
-}
-
 /// Widget actions that are emitted by a RoomsListEntry.
-#[derive(Clone, Default, Debug)]
+#[derive(Clone, DefaultNone, 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 RoomsListEntry {
-    fn set_adaptive_variant_selector(&self, cx: &mut Cx) {
+impl LiveHook for RoomsListEntry {
+    fn after_new_from_doc(&mut self, _cx: &mut Cx) {
+        // Adapt the preview based on the available space.
         self.view
-            .adaptive_view(cx, ids!(adaptive_preview))
+            .adaptive_view(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),
             });
@@ -247,19 +253,21 @@ 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, 
+                            uid,
+                            &scope.path,
                             RoomsListEntryAction::SecondaryClicked(room_id.clone(), fe.abs),
                         );
                     }
                 }
                 Hit::FingerLongPress(fe) => {
                     cx.widget_action(
-                        uid, 
+                        uid,
+                        &scope.path,
                         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,  RoomsListEntryAction::PrimaryClicked(room_id.clone()));
+                    cx.widget_action(uid, &scope.path, RoomsListEntryAction::PrimaryClicked(room_id.clone()));
                 }
                 _ => { }
             }
@@ -280,18 +288,13 @@ impl Widget for RoomsListEntry {
     }
 }
 
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct RoomsListEntryContent {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] 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);
     }
 
@@ -313,26 +316,26 @@ impl RoomsListEntryContent {
         cx: &mut Cx,
         room_info: &JoinedRoomInfo,
     ) {
-        self.view.label(cx, ids!(room_name)).set_text(cx, &room_info.room_name_id.to_string());
+        self.view.label(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(cx, ids!(timestamp))
+                    .label(ids!(timestamp))
                     .set_text(cx, &human_readable_date);
             }
             self.view
-                .html_or_plaintext(cx, ids!(latest_message))
+                .html_or_plaintext(ids!(latest_message))
                 .show_html(cx, msg);
         }
 
-        self.view.unread_badge(cx, ids!(unread_badge)).update_counts(
+        self.view.unread_badge(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(cx, ids!(tombstone_icon)).set_visible(cx, room_info.is_tombstoned);
+        self.view.view(ids!(tombstone_icon)).set_visible(cx, room_info.is_tombstoned);
     }
 
     /// Populates this RoomsListEntry with info about an invited room.
@@ -341,22 +344,22 @@ impl RoomsListEntryContent {
         cx: &mut Cx,
         room_info: &InvitedRoomInfo,
     ) {
-        self.view.label(cx, ids!(room_name)).set_text(cx, &room_info.room_name_id.to_string());
+        self.view.label(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(cx, ids!(timestamp)).set_text(cx, "");
+        self.view.label(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>{}</b> ({})", htmlize::escape_text(dn), htmlize::escape_text(user_id.as_str())),
-            Some(InviterInfo { user_id, .. }) => format!("Invited by {}", htmlize::escape_text(user_id.as_str())),
+            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(cx, ids!(latest_message)).show_html(cx, &inviter_string);
+        self.view.html_or_plaintext(ids!(latest_message)).show_html(cx, &inviter_string);
 
         match room_info.room_avatar {
             FetchedRoomAvatar::Text(ref text) => {
-                self.view.avatar(cx, ids!(avatar)).show_text(cx, None, None, text);
+                self.view.avatar(ids!(avatar)).show_text(cx, None, None, text);
             }
             FetchedRoomAvatar::Image(ref img_bytes) => {
-                let _ = self.view.avatar(cx, ids!(avatar)).show_image(
+                let _ = self.view.avatar(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),
@@ -365,7 +368,7 @@ impl RoomsListEntryContent {
         }
 
         self.view
-            .unread_badge(cx, ids!(unread_badge))
+            .unread_badge(ids!(unread_badge))
             .update_counts(false, 1, 0);
 
         self.draw_common(cx, &room_info.room_avatar, room_info.is_selected);
@@ -380,10 +383,10 @@ impl RoomsListEntryContent {
     ) {
         match room_avatar {
             FetchedRoomAvatar::Text(text) => {
-                self.view.avatar(cx, ids!(avatar)).show_text(cx, None, None, text);
+                self.view.avatar(ids!(avatar)).show_text(cx, None, None, text);
             }
             FetchedRoomAvatar::Image(img_bytes) => {
-                let _ = self.view.avatar(cx, ids!(avatar)).show_image(
+                let _ = self.view.avatar(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),
@@ -403,70 +406,85 @@ 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: use script-defined theme color instead of redefining constants below
+        // TODO: This is quite verbose, makepad should provide a way to override this at a higher level.
         if is_selected {
-            message_text_color = vec4(1., 1., 1., 1.); // COLOR_PRIMARY
-            room_name_color = vec4(1., 1., 1., 1.); // COLOR_PRIMARY
-            timestamp_color = vec4(1., 1., 1., 1.); // COLOR_PRIMARY
-            code_bg_color = vec4(0.3, 0.3, 0.3, 1.0); // a darker gray used for the background of code blocks and quote blocks
+            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 {
-            message_text_color = vec4(0.267, 0.267, 0.267, 1.0); // MESSAGE_TEXT_COLOR
-            room_name_color = vec4(0., 0., 0., 1.0);
-            timestamp_color = vec4(0.6, 0.6, 0.6, 1.0);
-            code_bg_color = vec4(0.929, 0.929, 0.929, 1.0); // #EDEDED
+            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`
         }
 
-        // Toggle the background color via the animator (handles selected/deselected bg).
-        self.animator_toggle(cx, is_selected, Animate::No, ids!(selected.on), ids!(selected.off));
-
-        // Update text colors for room name.
-        let mut room_name_label = self.view.label(cx, ids!(room_name));
-        script_apply_eval!(cx, room_name_label, {
-            draw_text +: {
-                color: #(room_name_color)
-            }
-        });
+        self.view.apply_over(
+            cx,
+            live!(
+                draw_bg: {
+                    color: (bg_color)
+                }
+            ),
+        );
 
-        // Update text colors for timestamp.
-        let mut timestamp_label = self.view.label(cx, ids!(timestamp));
-        script_apply_eval!(cx, timestamp_label, {
-            draw_text +: {
-                color: #(timestamp_color)
-            }
-        });
-
-        // Update text colors for the latest message preview (both HTML and plaintext variants).
-        let mut html_widget = self.view.html(cx, ids!(latest_message.html_view.html));
-        script_apply_eval!(cx, html_widget, {
-            font_color: #(message_text_color),
-            draw_text +: { color: #(message_text_color) },
-            draw_block +: {
-                quote_bg_color: #(code_bg_color),
-                code_color: #(code_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)
+                }
+                ),
+            );
+        }
 
-        // When selected, set link color to None so links inherit font_color (white)
-        // for better contrast against the blue selected background.
-        // When not selected, restore the default blue link color.
-        self.view
-            .html_or_plaintext(cx, ids!(latest_message))
-            .set_link_color(cx, if is_selected {
-                None
-            } else {
-                Some(vec4(0., 0., 0.933, 1.0)) // #0000EE, default HtmlLink color
-            });
+        if !self.view.label(ids!(timestamp)).is_empty() {
+            self.view.label(ids!(timestamp)).apply_over(
+                cx,
+                live!(
+                draw_text: {
+                    color: (timestamp_color)
+                }
+                ),
+            );
+        }
 
-        let mut pt_label = self.view.label(cx, ids!(latest_message.plaintext_view.pt_label));
-        script_apply_eval!(cx, pt_label, {
-            draw_text +: {
-                color: #(message_text_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)
+                        }
+                    }
+                }
+                ),
+            );
+        }
     }
 }
diff --git a/src/home/rooms_list_header.rs b/src/home/rooms_list_header.rs
index 6e60854ad..71b448bfe 100644
--- a/src/home/rooms_list_header.rs
+++ b/src/home/rooms_list_header.rs
@@ -8,76 +8,88 @@ use std::mem::discriminant;
 use makepad_widgets::*;
 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}}};
-
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.RoomsListHeader = #(RoomsListHeader::register_widget(vm)) {
+use crate::{
+    home::navigation_tab_bar::{NavigationBarAction, SelectedTab},
+    shared::{
+        callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition},
+        image_viewer::{ImageViewerAction, ImageViewerError, LoadState},
+        popup_list::{PopupKind, enqueue_popup_notification},
+    },
+};
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+
+    pub RoomsListHeader = {{RoomsListHeader}} {
         width: Fill,
-        height: Fit,
-        padding: Inset{bottom: 4}
+        height: 30,
+        padding: {bottom: 4}
         flow: Right,
+        visible: true,
+        align: {x: 0, y: 0.5}
         spacing: 3,
 
-        header_title := Label {
+        header_title = <Label> {
             width: Fill,
             height: Fit,
-            padding: 0
-            margin: Inset{left: 5, top: -1}
             flow: Right, // do not wrap
             text: "All Rooms"
-            draw_text +: {
+            draw_text: {
                 color: #x0
-                text_style: TITLE_TEXT {}
+                text_style: <TITLE_TEXT>{}
+                wrap: Ellipsis
             }
         },
 
-        View {
+        <View> {
             width: Fit, height: Fit,
-            margin: Inset{right: 3}
+            align: {x: 0, y: 0.5},
+            margin: {right: 3}
             flow: Overlay,
 
-            loading_spinner := LoadingSpinner {
+            loading_spinner = <LoadingSpinner> {
                 visible: false,
                 width: 20,
                 height: 20,
-                draw_bg +: {
+                draw_bg: {
                     color: (COLOR_ACTIVE_PRIMARY)
-                    border_size: 3.0
+                    border_size: 3.0,
                 }
             }
 
-            offline_icon := View {
+            offline_icon = <View> {
                 visible: false,
                 width: Fit, height: Fit,
-                Icon {
-                    draw_icon +: {
-                        svg: (ICON_CLOUD_OFFLINE),
+                <Icon> {
+                    draw_icon: {
+                        svg_file: (ICON_CLOUD_OFFLINE),
                         color: (COLOR_FG_DANGER_RED),
                     }
-                    icon_walk: Walk{width: 35, height: Fit, margin: Inset{left: -5, bottom: 4}}
+                    icon_walk: {width: 35, height: Fit, margin: {left: -5, bottom: 4}}
                 }
             }
 
-            synced_icon := View {
+            synced_icon = <View> {
                 visible: true,
                 width: Fit, height: Fit,
-                Icon {
-                    draw_icon +: {
-                        svg: (ICON_CLOUD_CHECKMARK),
+                <Icon> {
+                    draw_icon: {
+                        svg_file: (ICON_CLOUD_CHECKMARK),
                         color: (COLOR_FG_ACCEPT_GREEN),
                     }
-                    icon_walk: Walk{width: 25, height: Fit, margin: Inset{left: 1, bottom: 2}}
+                    icon_walk: {width: 25, height: Fit, margin: {left: 1, bottom: 2}}
                 }
             }
         }
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct RoomsListHeader {
     #[deref] view: View,
 
@@ -86,6 +98,39 @@ pub struct RoomsListHeader {
 
 impl Widget for RoomsListHeader {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let loading_spinner = self.view.view(ids!(loading_spinner));
+        let offline_icon = self.view.view(ids!(offline_icon));
+        let synced_icon = self.view.view(ids!(synced_icon));
+
+        for (_id, view, text) in [
+            (live_id!(loading_spinner), loading_spinner, "Syncing..."),
+            (live_id!(offline_icon), offline_icon, "Offline"),
+            (live_id!(synced_icon), synced_icon, "Fully synced"),
+        ] {
+            match event.hits(cx, view.area()) {
+                Hit::FingerHoverIn(_) => {
+                    if view.visible() {
+                        cx.widget_action(
+                            self.widget_uid(),
+                            &scope.path,
+                            TooltipAction::HoverIn {
+                                text: text.to_string(),
+                                widget_rect: view.area().rect(cx),
+                                options: CalloutTooltipOptions {
+                                    position: TooltipPosition::Bottom,
+                                    ..Default::default()
+                                },
+                            },
+                        );
+                    }
+                }
+                Hit::FingerHoverOut(_) => {
+                    cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                }
+                _ => {}
+            }
+        }
+
         if let Event::Actions(actions) = event {
             for action in actions {
                 match action.downcast_ref() {
@@ -95,9 +140,9 @@ impl Widget for RoomsListHeader {
                         if matches!(self.sync_state, State::Offline) {
                             continue;
                         }
-                        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.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.redraw(cx);
                         continue;
                     }
@@ -106,9 +151,9 @@ impl Widget for RoomsListHeader {
                             continue;
                         }
                         if matches!(new_state, State::Offline) {
-                            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);
+                            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);
                             enqueue_popup_notification(
                                 "Cannot reach the Matrix homeserver. Please check your connection.",
                                 PopupKind::Error,
@@ -125,7 +170,7 @@ impl Widget for RoomsListHeader {
                 }
 
                 if let Some(NavigationBarAction::TabSelected(tab)) = action.downcast_ref() {
-                    let header_title = self.view.label(cx, ids!(header_title));
+                    let header_title = self.view.label(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 c50ca5695..d886c7a87 100644
--- a/src/home/rooms_sidebar.rs
+++ b/src/home/rooms_sidebar.rs
@@ -11,73 +11,94 @@ use makepad_widgets::*;
 
 use crate::home::rooms_list::RoomsListWidgetExt;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.RoomsSideBar = #(RoomsSideBar::register_widget(vm)) {
-        Desktop := SolidView {
-            padding: Inset{top: 20, left: 10, right: 10}
+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}
             flow: Down, spacing: 5
             width: Fill, height: Fill
 
-            draw_bg.color: (COLOR_PRIMARY_DARKER)
+            show_bg: true,
+            draw_bg: {
+                instance bg_color: (COLOR_PRIMARY_DARKER)
+                instance border_color: #f2f2f2
+                instance border_size: 0.003
+
+                // Draws a right-side border
+                fn pixel(self) -> vec4 {
+                    if self.pos.x > 1.0 - self.border_size {
+                        return self.border_color;
+                    } else {
+                        return self.bg_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: Inset{top: 15, left: 15, right: 15, bottom: 10}
+                padding: {top: 15, left: 15, right: 15, bottom: 10}
                 flow: Down,
 
                 show_bg: true
-                draw_bg +: {
-                    color: (COLOR_PRIMARY_DARKER)
-                    border_radius: 4.0
+                draw_bg: {
+                    color: (COLOR_PRIMARY_DARKER),
+                    border_radius: 4.0,
                     border_size: 0.0
                     shadow_color: #0005
                     shadow_radius: 15.0
-                    shadow_offset: vec2(1.0, 0.0)
+                    shadow_offset: vec2(1.0, 0.0),
                 }
 
-                View { height: 23 }
+                <View> { height: 20 }
 
-                CachedWidget {
-                    rooms_list_header := RoomsListHeader {}
+                <CachedWidget> {
+                    rooms_list_header = <RoomsListHeader> {}
                 }
 
-                View {
+                <View> {
                     width: Fill,
-                    height: 45,
+                    height: 39,
                     flow: Right
-                    padding: Inset{top: 5, bottom: 2}
+                    padding: {top: 2, bottom: 2}
                     spacing: 5 
-                    align: Align{y: 0.5}
+                    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: Inset{left: 15, right: 15}
+            <View> {
+                padding: {left: 15, right: 15}
 
-                CachedWidget {
-                    rooms_list := RoomsList {}
+                <CachedWidget> {
+                    rooms_list = <RoomsList> {}
                 }
             }
         }
@@ -91,20 +112,19 @@ script_mod! {
 /// * 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(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct RoomsSideBar {
     #[deref] view: AdaptiveView,
 }
 
-impl ScriptHook for RoomsSideBar {
-    fn on_after_new(&mut self, vm: &mut ScriptVm) {
-        vm.with_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(self.view.rooms_list(cx, ids!(rooms_list)));
-        });
+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) {
         self.view.handle_event(cx, event, scope);
diff --git a/src/home/search_messages.rs b/src/home/search_messages.rs
index 5228ca129..51928fd75 100644
--- a/src/home/search_messages.rs
+++ b/src/home/search_messages.rs
@@ -3,38 +3,37 @@
 
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.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::*;
 
-    mod.widgets.SearchMessagesButton = set_type_default() do #(SearchMessagesButton::register_widget(vm)) {
-        ..mod.widgets.RoundedView
-
+    pub SearchMessagesButton = {{SearchMessagesButton}}<RobrixIconButton> {
         width: Fit,
         height: 35,
         margin: 0
         enabled: false
 
-        draw_bg +: {
+        draw_bg: {
             color: (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`)
-            border_radius: 4.0
-            border_color: (COLOR_SECONDARY)
-            border_size: 1.0
         }
-        draw_icon +: {
-            svg: (ICON_SEARCH)
+        draw_icon: {
+            svg_file: (ICON_SEARCH)
             color: (COLOR_FG_DISABLED)
             // color: (COLOR_PRIMARY),
             // color_hover: (COLOR_PRIMARY),
         }
-        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -1, right: -2} }
+        icon_walk: {width: 16, height: 16, margin: {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),
@@ -44,7 +43,7 @@ script_mod! {
     
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SearchMessagesButton {
     #[deref] button: Button,
 }
diff --git a/src/home/space_lobby.rs b/src/home/space_lobby.rs
index 1af564106..441b29ee5 100644
--- a/src/home/space_lobby.rs
+++ b/src/home/space_lobby.rs
@@ -10,13 +10,11 @@ use std::cell::RefCell;
 use std::collections::{BTreeMap, HashMap, HashSet};
 use imbl::Vector;
 use makepad_widgets::*;
-use makepad_widgets::animator::Animate;
 use matrix_sdk::{RoomDisplayName, RoomState, ruma::OwnedRoomId};
 use matrix_sdk_ui::spaces::SpaceRoom;
 use ruma::room::JoinRuleSummary;
 use tokio::sync::mpsc::UnboundedSender;
 use crate::shared::avatar::AvatarState;
-use crate::shared::expand_arrow::ExpandArrow;
 use crate::utils::replace_linebreaks_separators;
 use crate::{
     app::AppStateAction,
@@ -33,37 +31,44 @@ use crate::{
 };
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::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")
 
     // An entry in the RoomsList that will show the SpaceLobby when clicked.
-    mod.widgets.SpaceLobbyEntry = #(SpaceLobbyEntry::register_widget(vm)) {
+    pub SpaceLobbyEntry = {{SpaceLobbyEntry}}<RoundedView> {
         visible: false, // only visible when a space is selected
         width: Fill,
-        height: Fit,
+        height: 35, // same as CollapsibleHeader
         flow: Right,
-        align: Align{y: 0.5}
+        align: {y: 0.5}
         padding: 5,
-        margin: Inset{top: 10, bottom: 0}
-        spacing: 5
-        cursor: MouseCursor.Hand
+        margin: {top: 10, bottom: 0}
+        cursor: Hand
 
         show_bg: true
-        draw_bg +: {
-            hover: instance(0.0)
-            active: instance(0.0)
-
-            color: instance(COLOR_NAVIGATION_TAB_BG)
-            color_hover: instance(COLOR_NAVIGATION_TAB_BG_HOVER)
-            color_active: instance(COLOR_ACTIVE_PRIMARY)
-            border_size: uniform(0.0)
-            border_color: instance(#0000)
-            border_radius: uniform(4.0)
-            border_inset: uniform(vec4(0.0))
-
-            get_color: fn() -> vec4 {
+        draw_bg: {
+            instance hover: 0.0
+            instance active: 0.0
+
+            color: (COLOR_NAVIGATION_TAB_BG)
+            uniform color_hover: (COLOR_NAVIGATION_TAB_BG_HOVER)
+            uniform color_active: (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
+
+            fn get_color(self) -> vec4 {
                 return mix(
                     mix(
                         self.color,
@@ -75,40 +80,44 @@ script_mod! {
                 )
             }
 
-            pixel: fn() {
-                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+            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.border_inset.x + self.border_size,
-                    self.border_inset.y + self.border_size,
-                    self.rect_size.x - (self.border_inset.x + self.border_inset.z + self.border_size * 2.0),
-                    self.rect_size.y - (self.border_inset.y + self.border_inset.w + self.border_size * 2.0),
+                    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.border_color, self.border_size)
+                    sdf.stroke(self.get_border_color(), self.border_size)
                 }
                 return sdf.result;
             }
         }
 
-        icon := Icon {
+        icon = <Icon> {
             width: 25,
             height: 25,
-            margin: Inset{left: 5, right: 3}
-            align: Align{x: 0.5, y: 0.5}
-            draw_icon +: {
-                svg: (ICON_HIERARCHY)
+            margin: {left: 5, right: 3}
+            align: {x: 0.5, y: 0.5}
+            draw_icon: {
+                svg_file: (ICON_HIERARCHY)
 
-                active: instance(0.0)
-                hover: instance(0.0)
-                down: instance(0.0)
+                instance active: 0.0
+                instance hover: 0.0
+                instance down: 0.0
 
                 color: (COLOR_TEXT)
-                color_hover: instance(COLOR_TEXT)
-                color_active: instance(COLOR_TEXT)
+                uniform color_hover: (COLOR_TEXT)
+                uniform color_active: (COLOR_PRIMARY)
 
-                get_color: fn() -> vec4 {
+                fn get_color(self) -> vec4 {
                     return mix(
                         mix(
                             self.color,
@@ -120,26 +129,27 @@ script_mod! {
                     )
                 }
             }
-            icon_walk: Walk{ width: 25, height: 20, margin: Inset{top: 2} }
+            icon_walk: { width: 25, height: 20, margin: {left: 0, bottom: 0} }
         }
 
-        space_lobby_label := Label {
+        space_lobby_label = <Label> {
             width: Fill, height: Fit
             flow: Right,
             padding: 0,
 
-            draw_text +: {
-                active: instance(0.0)
-                hover: instance(0.0)
-                down: instance(0.0)
+            draw_text: {
+                instance active: 0.0
+                instance hover: 0.0
+                instance down: 0.0
 
                 color: (COLOR_TEXT)
-                color_hover: instance(COLOR_TEXT)
-                color_active: instance(COLOR_TEXT)
+                uniform color_hover: (COLOR_TEXT)
+                uniform color_active: (COLOR_PRIMARY)
 
-                text_style: REGULAR_TEXT {font_size: 11},
+                text_style: <REGULAR_TEXT>{font_size: 11},
+                wrap: Ellipsis,
 
-                get_color: fn() -> vec4 {
+                fn get_color(self) -> vec4 {
                     return mix(
                         mix(
                             self.color,
@@ -154,31 +164,31 @@ script_mod! {
             text: "Explore this Space"
         }
 
-        animator: Animator{
-            hover: {
-                default: @off
-                off: AnimatorState{
+        animator: {
+            hover = {
+                default: off
+                off = {
                     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: AnimatorState{
+                on = {
                     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: AnimatorState{
+                down = {
                     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,} }
                     }
                 }
             }
@@ -186,20 +196,17 @@ script_mod! {
     }
 
     // A view that draws the hierarchical tree structure lines.
-    let DrawTreeLine = set_type_default() do #(DrawTreeLine::script_shader(vm)){
-        ..mod.draw.DrawQuad
-    }
+    DrawTreeLine = {{DrawTreeLine}} { }
 
-    mod.widgets.TreeLines = #(TreeLines::register_widget(vm)) {
+    TreeLines = {{TreeLines}} {
         width: 0, height: Fill
-
-        draw_bg: DrawTreeLine {
+        draw_bg: {
             indent_width: 44.0
             level: 0.0
             is_last: 0.0
             parent_mask: 0.0
 
-            pixel: fn() {
+            fn pixel(self) -> vec4 {
                 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
@@ -208,36 +215,33 @@ script_mod! {
                 let line_width = 1.0;
                 let half_line = 0.5;
 
-                let mut c = vec4(0.0);
+                let c = vec4(0.0);
 
                 // Dumb approach, but it works.
                 for i in 0..20 {
-                    if f32(i) > self.level { break; }
+                    if float(i) > self.level { break; }
                     
-                    if f32(i) < self.level {
+                    if float(i) < self.level {
                         // Check mask for parent levels
-                        let mask_bit = modf(floor(self.parent_mask / pow(2.0, f32(i))), 2.0);
+                        let mask_bit = mod(floor(self.parent_mask / pow(2.0, float(i))), 2.0);
                         if mask_bit > 0.5 {
-                            // 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;
-                            }
+                             // 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);
+                             }
                         }
                     } 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 > (f32(i) * indent + half_indent) {
-                            c = vec4(0.8, 0.8, 0.8, 1.0);
-                            break;
+                        if abs(pos.y - hy) < half_line && pos.x > (float(i) * indent + half_indent) {
+                             return vec4(0.8, 0.8, 0.8, 1.0);
                         }
                         
                         // Vertical line (L shape)
-                        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;
+                        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);
                         }
                     }
                 }
@@ -247,173 +251,197 @@ script_mod! {
     }
 
     // Entry for a child subspace (can be expanded)
-    mod.widgets.SubspaceEntry = #(SubspaceEntry::register_widget(vm)) {
-
+    pub SubspaceEntry = {{SubspaceEntry}} {
         width: Fill,
         height: 44,
         flow: Right,
-        align: Align{y: 0.5}
-        padding: Inset{left: 8, right: 12}
-        cursor: MouseCursor.Hand
+        align: {y: 0.5}
+        padding: {left: 8, right: 12}
+        cursor: Hand
 
         show_bg: true
-        draw_bg +: {
-            hover: instance(0.0)
-            color: instance(#fff)
-            color_hover: instance(#f5f5f5)
-            pixel: fn() {
+        draw_bg: {
+            instance hover: 0.0
+            color: #fff
+            uniform color_hover: #f5f5f5
+            fn pixel(self) -> vec4 {
                 return mix(self.color, self.color_hover, self.hover);
             }
         }
 
         // The connecting hierarchical lines on the left.
-        tree_lines := mod.widgets.TreeLines {}
+        tree_lines = <TreeLines> {}
 
-        // Expand/collapse arrow (animated triangle)
-        expand_icon := mod.widgets.ExpandArrow {
+        // Expand/collapse icon
+        expand_icon = <IconRotated> {
             width: 16,
             height: 16,
-            margin: Inset{ left: -6, right: 4 }
-            draw_bg.border_radius: 1.5 // less rounded
+            margin: { top: 7, left: -8, right: 2 }
+            draw_icon: {
+                svg_file: (ICON_COLLAPSE)
+                rotation_angle: 90.0
+                color: #888
+            }
+            icon_walk: { width: 10, height: 10 }
         }
 
-        avatar := Avatar { width: 32, height: 32, margin: Inset{right: 8} }
+        avatar = <Avatar> { width: 32, height: 32, margin: {right: 8} }
 
-        content := View {
+        content = <View> {
             width: Fill
             height: Fit
             flow: Down
-            align: Align { y: 0.5 }
             spacing: 5,
-
-            name_label := Label {
+            name_label = <Label> {
                 width: Fill, height: Fit,
                 flow: Right
                 margin: 0
                 padding: 0
-                flow: Flow.Right{wrap: false}
-                draw_text +: { text_style: REGULAR_TEXT {font_size: 10.5}, color: #1a1a1a }
+                draw_text: { text_style: <REGULAR_TEXT>{font_size: 10.5}, color: #1a1a1a, wrap: Ellipsis }
             }
-            info_label := Label {
-                width: Fill, height: Fit,
+            info_label = <Label> {
+                width: Fit, height: Fit,
                 flow: Right
                 margin: 0
                 padding: 0
-                flow: Flow.Right{wrap: false}
-                draw_text +: { text_style: REGULAR_TEXT {font_size: 8.5}, color: #737373 }
+                draw_text: { text_style: <REGULAR_TEXT>{font_size: 8.5}, color: #737373, wrap: Ellipsis }
             }
         }
 
-        buttons_view := View {
+        buttons_view = <View> {
             width: Fit,
             height: Fit,
             flow: Right,
             spacing: 8,
-            align: Align{x: 1.0, y: 0.5}
-            margin: Inset{left: 8}
+            align: {x: 1.0, y: 0.5}
+            margin: {left: 8}
             visible: false
 
-            join_button := RobrixPositiveIconButton {
+            join_button = <RobrixIconButton> {
                 width: Fit,
                 padding: 8
                 spacing: 0
-                icon_walk: Walk{width: 0, height: 0}
-                draw_text.text_style: REGULAR_TEXT {font_size: 9.5}
+                icon_walk: {width: 0, height: 0}
+                draw_bg: {
+                    border_size: 0.75
+                    border_color: (COLOR_FG_ACCEPT_GREEN)
+                    color: (COLOR_BG_ACCEPT_GREEN)
+                }
+                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: Walk{width: 0, height: 0}
-                draw_text.text_style: REGULAR_TEXT {font_size: 9.5}
+                icon_walk: {width: 0, height: 0}
+                draw_bg: {
+                    border_size: 0.0
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_text: {
+                    text_style: <REGULAR_TEXT>{font_size: 9.5},
+                    color: (COLOR_PRIMARY),
+                }
                 text: "View"
             }
 
-            leave_button := RobrixNegativeIconButton {
+            leave_button = <RobrixIconButton> {
                 width: Fit,
                 padding: 8
                 spacing: 0
-                icon_walk: Walk{width: 0, height: 0}
-                draw_text.text_style: REGULAR_TEXT {font_size: 9.5}
+                icon_walk: {width: 0, height: 0}
+                draw_bg: {
+                    border_size: 0.75
+                    border_color: (COLOR_FG_DANGER_RED)
+                    color: (COLOR_BG_DANGER_RED)
+                }
+                draw_text: {
+                    text_style: <REGULAR_TEXT>{font_size: 9.5},
+                    color: (COLOR_FG_DANGER_RED),
+                }
                 text: "Leave"
             }
         }
 
 
-        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} } }
+        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} } }
             }
         }
     }
 
     // Entry for a child room within a space, which cannot be expanded.
-    mod.widgets.RoomEntry = mod.widgets.SubspaceEntry {
-        cursor: MouseCursor.Default
+    pub RoomEntry = <SubspaceEntry> {
+        cursor: Default
 
-        expand_icon := View {
+        expand_icon = <View> {
             width: 10
             height: 16
         }
     }
 
-    mod.widgets.SpaceLobbyStatusLabel = View {
+    StatusLabel = <View> {
         width: Fill, height: Fit,
         flow: Right,
-        align: Align{ x: 0.5, y: 0.5 }
+        align: { x: 0.5, y: 0.5 }
         padding: 20.0,
 
-        loading_spinner := LoadingSpinner {
+        loading_spinner = <LoadingSpinner> {
             width: 18,
             height: 18,
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_ACTIVE_PRIMARY)
-                border_size: 2.5
+                border_size: 2.5,
             }
         }
 
-        label := Label {
-            padding: Inset{left: 10}
+        label = <Label> {
+            padding: {left: 10}
             width: Fit,
-            flow: Flow.Right{wrap: true},
-            align: Align{ x: 0.5, y: 0.5 }
-            draw_text +: {
+            flow: RightWrap,
+            align: { x: 0.5, y: 0.5 }
+            draw_text: {
+                wrap: Word,
                 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
-    mod.widgets.SubspaceLoadingEntry = View {
+    SubspaceLoadingEntry = <View> {
         width: Fill, height: 36,
         flow: Right,
-        align: Align{ y: 0.5 }
-        padding: Inset{left: 8, right: 12}
+        align: { y: 0.5 }
+        padding: {left: 8, right: 12}
 
         // Tree lines replace the spacer
-        tree_lines := mod.widgets.TreeLines {}
+        tree_lines = <TreeLines> {}
 
-        loading_spinner := LoadingSpinner {
+        loading_spinner = <LoadingSpinner> {
             width: 14,
             height: 14,
-            margin: Inset{left: 8, right: 10}
-            draw_bg +: {
+            margin: {left: 8, right: 10}
+            draw_bg: {
                 color: (COLOR_ACTIVE_PRIMARY)
-                border_size: 2.0
+                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..."
@@ -421,78 +449,90 @@ script_mod! {
     }
 
     // The main view that shows the lobby (homepage) for a space.
-    mod.widgets.SpaceLobbyScreen = set_type_default() do #(SpaceLobbyScreen::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub SpaceLobbyScreen = {{SpaceLobbyScreen}} {
         width: Fill, height: Fill,
         flow: Down,
 
         show_bg: true
-        draw_bg +: {
-            color: COLOR_PRIMARY
+        draw_bg: {
+            color: #fff
         }
 
         // Header with parent space info
-        header := SolidView {
+        header = <View> {
             width: Fill,
             height: Fit,
             flow: Down,
-            padding: Inset{left: 16, right: 16, top: 16, bottom: 8}
+            padding: {left: 16, right: 16, top: 16, bottom: 8}
 
             show_bg: true,
-            draw_bg.color: (COLOR_BG_PREVIEW)
+            draw_bg: {
+                color: (COLOR_BG_PREVIEW)
+            }
 
-            space_info_label := Label {
+            space_info_label = <Label> {
                 width: Fill,
                 height: Fit,
-                flow: Right, // do not wrap
-                margin: Inset{left: 2}
-                draw_text +: {
-                    text_style: REGULAR_TEXT {font_size: 10},
+                margin: {left: 2}
+                draw_text: {
+                    text_style: <REGULAR_TEXT>{font_size: 10},
                     color: #737373,
+                    wrap: Ellipsis,
                 }
                 text: "Welcome to the space:"
             }
             
-            parent_space_row := View {
+            parent_space_row = <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right,
-                align: Align{ y: 0.5 }
-                padding: Inset{ top: 8 }
+                align: { y: 0.5 }
+                padding: { top: 8 }
                 
-                parent_avatar := Avatar {
+                parent_avatar = <Avatar> {
                     width: 36,
                     height: 36,
-                    margin: Inset{ right: 12 }
+                    margin: { right: 12 }
                 }
                 
-                parent_name := Label {
+                parent_name = <Label> {
                     width: Fill,
                     height: Fit,
-                    flow: Right, // do not wrap
-                    margin: Inset{top: 4} // vertically center-align with the avatar
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 14},
+                    margin: {top: 4} // vertically center-align with the avatar
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 14},
                         color: #1a1a1a,
+                        wrap: Ellipsis,
                     }
                     text: ""
                 }
 
-                invite_button := RobrixPositiveIconButton {
+                invite_button = <RobrixIconButton> {
                     width: Fit
-                    align: Align{x: 0.5, y: 0.5}
-                    margin: Inset{left: 6}
+                    align: {x: 0.5, y: 0.5}
+                    margin: {left: 6}
                     padding: 12,
-                    draw_icon.svg: (ICON_ADD_USER)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_ADD_USER)
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
+                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+
+                    draw_bg: {
+                        border_size: 0.75
+                        border_color: (COLOR_FG_ACCEPT_GREEN),
+                        color: (COLOR_BG_ACCEPT_GREEN)
+                    }
                     text: "Invite"
+                    draw_text:{
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
                 }
             }
         }
 
         // The hierarchical tree list
-        tree_list := PortalList {
+        tree_list = <PortalList> {
             keep_invisible: false,
             max_pull_down: 0.0,
             auto_tail: false,
@@ -500,11 +540,11 @@ script_mod! {
             flow: Down,
             spacing: 0.0
 
-            subspace_entry := mod.widgets.SubspaceEntry {}
-            room_entry := mod.widgets.RoomEntry {}
-            subspace_loading := mod.widgets.SubspaceLoadingEntry {}
-            status_label := mod.widgets.SpaceLobbyStatusLabel {}
-            bottom_filler := View {
+            subspace_entry = <SubspaceEntry> {}
+            room_entry = <RoomEntry> {}
+            subspace_loading = <SubspaceLoadingEntry> {}
+            status_label = <StatusLabel> {}
+            bottom_filler = <View> {
                 width: Fill,
                 height: 80.0,
             }
@@ -530,11 +570,10 @@ struct SpaceLobbyUiState {
 
 
 /// A clickable entry shown in the RoomsList that will show the space lobby when clicked.
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SpaceLobbyEntry {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
 }
 
 impl Widget for SpaceLobbyEntry {
@@ -580,7 +619,7 @@ pub enum SpaceLobbyAction {
     SpaceLobbyEntryClicked,
 }
 
-#[derive(Script, ScriptHook)]
+#[derive(Live, LiveHook, LiveRegister)]
 #[repr(C)]
 pub struct DrawTreeLine {
     #[deref] draw_super: DrawQuad,
@@ -590,9 +629,8 @@ pub struct DrawTreeLine {
     #[live] parent_mask: f32,
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TreeLines {
-    #[uid] uid: WidgetUid,
     #[redraw] #[live] draw_bg: DrawTreeLine,
     #[walk] walk: Walk,
 }
@@ -610,51 +648,36 @@ impl Widget for TreeLines {
     }
 }
 
-
 /// A clickable entry for a child subspace.
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SubspaceEntry {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
     #[rust] room_id: Option<OwnedRoomId>,
     #[rust] is_space: bool,
     #[rust] show_buttons_view: bool,
-    #[rust] is_expanded: bool,
 }
 
 /// Actions emitted when a `SubspaceEntry` or its buttons are clicked.
 ///
 /// These *are* all widget actions.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 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);
         }
 
-        // NOTE: Use child_by_path instead of widget tree-based lookups
-        //       (e.g., self.view.view(), self.view.button()) because these
-        //       fail for portal list items.
-        let buttons_view_ref = self.view.child_by_path(ids!(buttons_view));
-        let buttons_view_rect = buttons_view_ref.area().rect(cx);
+        let buttons_view_rect = self.view.view(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))
@@ -663,7 +686,7 @@ impl Widget for SubspaceEntry {
                 self.animator_play(cx, ids!(hover.on));
                 if !self.show_buttons_view {
                     self.show_buttons_view = true;
-                    self.view.child_by_path(ids!(buttons_view)).set_visible(cx, true);
+                    self.view.view(ids!(buttons_view)).set_visible(cx, true);
                     self.redraw(cx);
                 }
             }
@@ -672,7 +695,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.child_by_path(ids!(buttons_view)).set_visible(cx, true);
+                self.view.view(ids!(buttons_view)).set_visible(cx, true);
                 self.redraw(cx);
             }
             Hit::FingerHoverOut(fe) => {
@@ -684,7 +707,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.child_by_path(ids!(buttons_view)).set_visible(cx, false);
+                    self.view.view(ids!(buttons_view)).set_visible(cx, false);
                     self.redraw(cx);
                 }
             }
@@ -693,25 +716,18 @@ 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.child_by_path(ids!(buttons_view)).area().rect(cx).contains(fe.abs);
+                    && self.view.view(ids!(buttons_view)).area().rect(cx).contains(fe.abs);
                 if !is_within_buttons_view {
                     if let Some(room_id) = self.room_id.as_ref() {
-                        if self.is_space {
-                            // Toggle expansion and animate the arrow
-                            self.is_expanded = !self.is_expanded;
-                            if let Some(mut arrow) = self.view.child_by_path(ids!(expand_icon)).borrow_mut::<ExpandArrow>() {
-                                arrow.set_is_open(cx, self.is_expanded, Animate::Yes);
+                        cx.widget_action(
+                            self.widget_uid(),
+                            &scope.path,
+                            if self.is_space {
+                                SubspaceEntryAction::SpaceClicked { space_id: room_id.clone() }
+                            } else {
+                                SubspaceEntryAction::RoomClicked { room_id: room_id.clone() }
                             }
-                            cx.widget_action(
-                                self.widget_uid(),
-                                SubspaceEntryAction::SpaceClicked { space_id: room_id.clone() },
-                            );
-                        } else {
-                            cx.widget_action(
-                                self.widget_uid(),
-                                SubspaceEntryAction::RoomClicked { room_id: room_id.clone() },
-                            );
-                        }
+                        );
                     }
                 }
             }
@@ -721,15 +737,16 @@ impl Widget for SubspaceEntry {
         self.view.handle_event(cx, event, scope);
 
         if let Event::Actions(actions) = event {
-            let join_button = self.view.child_by_path(ids!(buttons_view.join_button)).as_button();
-            let leave_button = self.view.child_by_path(ids!(buttons_view.leave_button)).as_button();
-            let view_button = self.view.child_by_path(ids!(buttons_view.view_button)).as_button();
+            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));
 
             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,
                         SubspaceEntryAction::JoinClicked { room_id, is_space: self.is_space },
                     );
                 }
@@ -739,6 +756,7 @@ impl Widget for SubspaceEntry {
                     leave_button.reset_hover(cx);
                     cx.widget_action(
                         self.widget_uid(),
+                        &scope.path,
                         SubspaceEntryAction::LeaveClicked { room_id, is_space: self.is_space },
                     );
                 }
@@ -748,6 +766,7 @@ impl Widget for SubspaceEntry {
                     view_button.reset_hover(cx);
                     cx.widget_action(
                         self.widget_uid(),
+                        &scope.path,
                         SubspaceEntryAction::ViewClicked { room_id },
                     );
                 }
@@ -761,7 +780,6 @@ impl Widget for SubspaceEntry {
 }
 
 /// The subset of info in [`SpaceRoom`] that we display for each room/space.
-#[derive(Debug)]
 struct SpaceRoomInfo {
     id: OwnedRoomId,
     name: String,
@@ -836,14 +854,12 @@ enum TreeEntry {
 }
 
 /// The view showing the lobby/homepage for a given space.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SpaceLobbyScreen {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 
     /// The space that is currently being displayed.
     #[rust] space_name_id: Option<RoomNameId>,
-    #[rust] space_avatar_state: AvatarState,
 
     /// The sender channel to submit space requests to the background service.
     #[rust] space_request_sender: Option<UnboundedSender<SpaceRequest>>,
@@ -886,9 +902,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.space_avatar_state = AvatarState::Known(sr.avatar_url.clone());
-                            self.space_avatar_state.update_from_cache(cx); // prefetch the avatar image
-                            self.view.label(cx, ids!(header.space_info_label)).set_text(cx, &format!(
+                            self.view.label(ids!(header.space_info_label)).set_text(cx, &format!(
                                 "{}  ·  {} {}",
                                 match sr.join_rule {
                                     Some(JoinRuleSummary::Public) => "🌐  Public space",
@@ -967,7 +981,7 @@ impl Widget for SpaceLobbyScreen {
             }
 
             // Handle the invite button being clicked in the header.
-            if self.view.button(cx, ids!(header.parent_space_row.invite_button)).clicked(actions) {
+            if self.view.button(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()));
                 }
@@ -976,20 +990,6 @@ impl Widget for SpaceLobbyScreen {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        // Draw parent avatar from the SpaceRoom's avatar URL, or show initials.
-        let parent_avatar_ref = self.view.avatar(cx, ids!(parent_avatar));
-        if self.space_avatar_state.update_from_cache(cx).is_none_or(|data| {
-            parent_avatar_ref.show_image(
-                cx,
-                None,
-                |cx, img| utils::load_png_or_jpg(&img, cx, data),
-            ).is_err()
-        }) {
-            let first_char = self.space_name_id.as_ref().and_then(|sni| sni.name_for_avatar())
-                .and_then(|name| utils::user_name_first_letter(name));
-            parent_avatar_ref.show_text(cx, None, None, first_char.unwrap_or("S"));
-        }
-        
         while let Some(widget_to_draw) = self.view.draw_walk(cx, scope, walk).step() {
             let portal_list_ref = widget_to_draw.as_portal_list();
             let Some(mut list) = portal_list_ref.borrow_mut() else { continue };
@@ -1004,21 +1004,17 @@ impl Widget for SpaceLobbyScreen {
             list.set_item_range(cx, 0, total_count);
 
             while let Some(item_id) = list.next_visible_item(cx) {
-                // NOTE: Use child_by_path instead of widget tree-based lookups
-                //       (e.g., item.label(), item.avatar(), item.widget())
-                //       because WidgetRef::widget() fails for portal list items.
-
                 // Draw loading indicator
                 let item = if self.is_loading && item_id == 0 {
                     let item = list.item(cx, item_id, id!(status_label));
-                    item.child_by_path(ids!(label)).as_label().set_text(cx, "Loading rooms and spaces...");
+                    item.label(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.child_by_path(ids!(label)).as_label().set_text(cx, "No rooms or spaces found.");
-                    item.child_by_path(ids!(loading_spinner)).set_visible(cx, false);
+                    item.label(ids!(label)).set_text(cx, "No rooms or spaces found.");
+                    item.view(ids!(loading_spinner)).apply_over(cx, live! { visible: false });
                     item
                 }
                 // Draw a regular entry
@@ -1030,28 +1026,23 @@ impl Widget for SpaceLobbyScreen {
                             let show_view_button = show_leave_button && !info.is_space();
                             let item = if info.is_space() {
                                 let item = list.item(cx, item_id, id!(subspace_entry));
-                                let is_expanded = self.expanded_spaces.contains(&info.id);
                                 let mut show_buttons_view = false;
-                                let mut need_snap = false;
                                 if let Some(mut inner) = item.borrow_mut::<SubspaceEntry>() {
                                     let id_changed = inner.room_id.as_ref() != Some(&info.id);
-                                    need_snap = id_changed || inner.is_expanded != is_expanded;
                                     inner.room_id = Some(info.id.clone());
                                     inner.is_space = true;
-                                    inner.is_expanded = is_expanded;
                                     if id_changed {
                                         inner.show_buttons_view = false;
                                     }
                                     show_buttons_view = inner.show_buttons_view;
                                 }
-                                item.child_by_path(ids!(buttons_view)).set_visible(cx, show_buttons_view);
-                                // Snap expand arrow to correct state without animation
-                                // when item is reused or state changed externally
-                                if need_snap {
-                                    if let Some(mut arrow) = item.child_by_path(ids!(expand_icon)).borrow_mut::<ExpandArrow>() {
-                                        arrow.set_is_open(cx, is_expanded, Animate::No);
-                                    }
-                                }
+                                item.view(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) }
+                                });
                                 item
                             } else {
                                 let item = list.item(cx, item_id, id!(room_entry));
@@ -1065,19 +1056,19 @@ impl Widget for SpaceLobbyScreen {
                                     }
                                     show_buttons_view = inner.show_buttons_view;
                                 }
-                                item.child_by_path(ids!(buttons_view)).set_visible(cx, show_buttons_view);
+                                item.view(ids!(buttons_view)).set_visible(cx, show_buttons_view);
                                 item
                             };
 
-                            item.child_by_path(ids!(buttons_view.join_button)).set_visible(cx, show_join_button);
-                            item.child_by_path(ids!(buttons_view.leave_button)).set_visible(cx, show_leave_button);
-                            item.child_by_path(ids!(buttons_view.view_button)).set_visible(cx, show_view_button);
+                            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);
 
                             // Below, draw things that are common to child rooms and subspaces.
-                            item.child_by_path(ids!(content.name_label)).as_label().set_text(cx, &info.name);
+                            item.label(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.child_by_path(ids!(avatar)).as_avatar();
+                            let avatar_ref = item.avatar(ids!(avatar));
                             let first_char = utils::user_name_first_letter(&info.name);
                             let mut drew_avatar = false;
 
@@ -1112,16 +1103,16 @@ impl Widget for SpaceLobbyScreen {
                                 avatar_ref.show_text(cx, None, None, first_char.unwrap_or("#"));
                             }
 
-                            if let Some(mut lines) = item.child_by_path(ids!(tree_lines)).borrow_mut::<TreeLines>() {
+                            if let Some(mut lines) = item.widget(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;
-                                lines.draw_bg.indent_width = 44.0;
+                                lines.draw_bg.indent_width = 44.0; // Hardcoded to match
                             }
 
                             // 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.child_by_path(ids!(content.info_label)).as_label();
+                            let info_label = item.label(ids!(content.info_label));
                             let mut info_parts = Vec::new();
 
                             // Add join status for rooms we haven't joined
@@ -1153,7 +1144,7 @@ impl Widget for SpaceLobbyScreen {
                                 }
                             }
 
-                            // Add topic if available (Label handles truncation via flow: Flow.Right{wrap: false})
+                            // Add topic if available (Label handles truncation via wrap: Ellipsis)
                             if let Some(topic) = &info.topic {
                                 info_parts.push(topic.to_string());
                             }
@@ -1166,7 +1157,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.child_by_path(ids!(tree_lines)).borrow_mut::<TreeLines>() {
+                            if let Some(mut lines) = item.widget(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;
@@ -1348,7 +1339,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(cx, ids!(header.parent_space_row.parent_name));
+        let parent_name = self.view.label(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
@@ -1377,7 +1368,7 @@ impl SpaceLobbyScreen {
 
         // Clear the main content until we receive the async space info responses.
         self.tree_entries.clear();
-        self.view.label(cx, ids!(header.space_info_label)).set_text(cx, "");
+        self.view.label(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
@@ -1390,7 +1381,7 @@ impl SpaceLobbyScreen {
 
         // TODO: move avatar setting to `draw_walk()`
         // Set parent avatar
-        let avatar_ref = self.view.avatar(cx, ids!(header.parent_space_row.parent_avatar));
+        let avatar_ref = self.view.avatar(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 8f613dc93..0e1d43943 100644
--- a/src/home/spaces_bar.rs
+++ b/src/home/spaces_bar.rs
@@ -13,43 +13,46 @@ 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, 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, callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition}, room_filter_input_bar::RoomFilterAction}, utils::{self, RoomNameId}
 };
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::avatar::*;
 
     // The duration of the animation when showing/hiding the SpacesBar (in Mobile view mode only).
-    mod.widgets.SPACES_BAR_ANIMATION_DURATION_SECS = 0.25
+    pub SPACES_BAR_ANIMATION_DURATION_SECS = 0.25
 
     // An entry in the list of all spaces, which shown the Space's avatar and name.
-    mod.widgets.SpacesBarEntry = set_type_default() do #(SpacesBarEntry::register_widget(vm)) {
-        // ..mod.widgets.RoundedView // TODO: I don't think this is needed if we use our own draw_bg shader
-
+    SpacesBarEntry = {{SpacesBarEntry}}<RoundedView> {
         width: (NAVIGATION_TAB_BAR_SIZE - 5),
         height: (NAVIGATION_TAB_BAR_SIZE - 5),
         flow: Down
         padding: 5,
         margin: 3,
-        align: Align{x: 0.5, y: 0.5}
-        cursor: MouseCursor.Hand
+        align: {x: 0.5, y: 0.5}
+        cursor: Hand
 
         show_bg: true
-        draw_bg +: {
-            hover: instance(0.0)
-            active: instance(0.0)
+        draw_bg: {
+            instance hover: 0.0
+            instance active: 0.0
 
-            color: instance(#0000)
-            color_hover: instance((COLOR_NAVIGATION_TAB_BG_HOVER))
-            color_active: instance((COLOR_NAVIGATION_TAB_BG_ACTIVE))
+            color: #0000
+            uniform color_hover: (COLOR_NAVIGATION_TAB_BG_HOVER)
+            uniform color_active: (COLOR_NAVIGATION_TAB_BG_ACTIVE)
 
-            border_color: instance(#0000)
-            border_size: uniform(0.0)
-            border_radius: uniform(4.0)
-            border_inset: uniform(vec4(0.0))
+            border_size: 0.0
+            border_color: #0000
+            uniform inset: vec4(0.0, 0.0, 0.0, 0.0)
+            border_radius: 4.0
 
-            get_color: fn() -> vec4 {
+            fn get_color(self) -> vec4 {
                 return mix(
                     mix(
                         self.color,
@@ -61,58 +64,62 @@ script_mod! {
                 )
             }
 
-            pixel: fn() {
-                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+            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.border_inset.x + self.border_size,
-                    self.border_inset.y + self.border_size,
-                    self.rect_size.x - (self.border_inset.x + self.border_inset.z + self.border_size * 2.0),
-                    self.rect_size.y - (self.border_inset.y + self.border_inset.w + self.border_size * 2.0),
+                    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.border_color, self.border_size)
+                    sdf.stroke(self.get_border_color(), self.border_size)
                 }
                 return sdf.result;
             }
         }
 
-        avatar := Avatar {
-            width: mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE
-            height: mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE
+        avatar = <Avatar> {
+            width: 45, height: 45
             // If no avatar picture, use white text on a dark background.
-            text_view +: {
-                draw_bg.color: (COLOR_FG_DISABLED),
-                text +: {
-                    draw_text +: {
-                        text_style: theme.font_regular { font_size: mod.widgets.NAVIGATION_TAB_BAR_AVATAR_FONT_SIZE },
-                        color: (COLOR_PRIMARY),
-                    }
+            text_view = {
+                draw_bg: {
+                    background_color: (COLOR_FG_DISABLED),
                 }
+                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: Flow.Right{wrap: false}, // do not wrap
+            flow: RightWrap, // do not wrap
             padding: 0,
-            align: Align{x: 0.5}
-            draw_text +: {
-                active: instance(0.0)
-                hover: instance(0.0)
-                down: instance(0.0)
+            align: {x: 0.5}
+            draw_text: {
+                instance active: 0.0
+                instance hover: 0.0
+                instance down: 0.0
 
                 color: (COLOR_NAVIGATION_TAB_FG)
-                color_hover: uniform(COLOR_NAVIGATION_TAB_FG_HOVER)
-                color_active: uniform(COLOR_NAVIGATION_TAB_FG_ACTIVE)
+                uniform color_hover: (COLOR_NAVIGATION_TAB_FG_HOVER)
+                uniform color_active: (COLOR_NAVIGATION_TAB_FG_ACTIVE)
 
-                // text_style: theme.font_bold {font_size: 9}
-                text_style: REGULAR_TEXT {font_size: 9}
+                // text_style: <THEME_FONT_BOLD>{font_size: 9}
+                text_style: <REGULAR_TEXT>{font_size: 9}
+                wrap: Word,
 
-                get_color: fn() {
+                fn get_color(self) -> vec4 {
                     return mix(
                         mix(
                             self.color,
@@ -126,112 +133,107 @@ script_mod! {
             }
         }
 
-        animator: Animator {
-            hover: {
-                default: @off
-                off: AnimatorState{
+        animator: {
+            hover = {
+                default: off
+                off = {
                     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: AnimatorState{
+                on = {
                     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: AnimatorState{
+                down = {
                     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,} }
-                    }
-                }
-            }
-            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} }
+                        space_name = { draw_text: {down: [{time: 0.0, value: 1.0}], hover: 1.0,} }
                     }
                 }
             }
         }
     }
 
-    mod.widgets.SpacesStatusLabel = View {
+    StatusLabel = <View> {
         width: (NAVIGATION_TAB_BAR_SIZE),
         height: (NAVIGATION_TAB_BAR_SIZE),
-        align: Align{ x: 0.5, y: 0.5 }
-        margin: Inset{top: 9, left: 0, bottom: 5}
-        padding: 4.0,
+        align: { x: 0.5, y: 0.5 }
+        margin: {top: 9, left: 2, bottom: 5}
+        // padding: 5.0,
 
-        label := Label {
+        label = <Label> {
             padding: 0
             margin: 0
             width: Fill,
             height: Fill
-            flow: Flow.Right{wrap: true},
-            align: Align{ x: 0.5, y: 0.5 }
-            draw_text +: {
+            align: { x: 0.5, y: 0.5 }
+            draw_text: {
+                wrap: Word,
                 color: (MESSAGE_TEXT_COLOR),
-                text_style: REGULAR_TEXT {font_size: 9}
+                text_style: <REGULAR_TEXT>{font_size: 9}
             }
         }
     }
 
-    mod.widgets.SpacesList = PortalList {
+    SpacesList = <PortalList> {
         height: Fill,
         width: Fill,
+        flow: Down,
         spacing: 0.0
 
         auto_tail: false, 
         max_pull_down: 0.0,
-        scroll_bar: ScrollBar {  // hide the scroll bar
+        scroll_bar: {  // hide the scroll bar
             bar_size: 0.0,
             min_handle_size: 0.0
         }
 
-        spaces_bar_entry := mod.widgets.SpacesBarEntry {}
-        StatusLabel := mod.widgets.SpacesStatusLabel {}
-        BottomFiller := View {
+        SpacesBarEntry = <SpacesBarEntry> {}
+        StatusLabel = <StatusLabel> {}
+        BottomFiller = <View> {
             width: (NAVIGATION_TAB_BAR_SIZE)
             height: (NAVIGATION_TAB_BAR_SIZE)
         }
     }
 
-    mod.widgets.SpacesBar = #(SpacesBar::register_widget(vm)) {
-        Desktop := View {
-            align: Align{x: 0.5, y: 0.5}
+    pub SpacesBar = {{SpacesBar}}<AdaptiveView> {
+        Desktop = {
+            align: {x: 0.5, y: 0.5}
             padding: 0,
             width: (NAVIGATION_TAB_BAR_SIZE), 
             height: Fill
 
-            CachedWidget {
-                spaces_list := mod.widgets.SpacesList { }
+            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,
+                }
             }
         }
 
-        Mobile := View {
-            align: Align{x: 0.5, y: 0.5}
-            padding: 0,
+        Mobile = {
+            align: {x: 0.5, y: 0.5}
             width: Fill,
             height: (NAVIGATION_TAB_BAR_SIZE)
 
-            CachedWidget {
-                spaces_list := mod.widgets.SpacesList { }
+            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,
+                }
             }
         }
     }
@@ -239,28 +241,26 @@ script_mod! {
 
 
 /// Actions emitted by and handled by the SpacesBar widget (and its children).
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 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(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SpacesBarEntry {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
 
     #[rust] space_name_id: Option<RoomNameId>,
 }
 
 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,7 +269,8 @@ 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(), 
+                this.widget_uid(),
+                &scope.path,
                 TooltipAction::HoverIn {
                     widget_rect: area.rect(cx),
                     text: this.space_name_id.as_ref().map_or(
@@ -296,7 +297,8 @@ impl Widget for SpacesBarEntry {
             Hit::FingerHoverOut(_) => {
                 self.animator_play(cx, ids!(hover.off));
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     TooltipAction::HoverOut,
                 );
             }
@@ -305,7 +307,8 @@ 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(), 
+                            self.widget_uid(),
+                            &scope.path,
                             SpacesBarAction::ButtonSecondaryClicked { space_name_id },
                         );
                     }
@@ -316,7 +319,8 @@ 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(), 
+                        self.widget_uid(),
+                        &scope.path,
                         SpacesBarAction::ButtonSecondaryClicked { space_name_id },
                     );
                 }
@@ -325,7 +329,8 @@ 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(), 
+                        self.widget_uid(),
+                        &scope.path,
                         SpacesBarAction::ButtonClicked { space_name_id },
                     );
                 }
@@ -345,7 +350,11 @@ 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);
-        self.animator_toggle(cx, is_selected, Animate::No, ids!(active.on), ids!(active.off));
+        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) } }
+        });
     }
 }
 impl SpacesBarEntryRef {
@@ -458,7 +467,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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SpacesBar {
     #[deref] view: AdaptiveView,
 
@@ -539,12 +548,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() {
-                script_apply_eval!(cx, list, {
-                    flow: #(Flow::Down),
+                list.apply_over(cx, live! {
+                    flow: Down,
                 });
             } else {
-                script_apply_eval!(cx, list, {
-                    flow: #(Flow::right()),
+                list.apply_over(cx, live! {
+                    flow: Right,
                 });
             }
 
@@ -554,7 +563,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(cx, ids!(label)).set_text(
+                        item.label(ids!(label)).set_text(
                             cx,
                             if self.is_filtered {
                                 "Found no\nmatching spaces."
@@ -576,11 +585,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!(spaces_bar_entry));
+                        let item = list.item(cx, portal_list_index, id!(SpacesBarEntry));
                         // Populate the space name and avatar (although this isn't visible by default).
                         let space_name = space.space_name_id.to_string();
-                        item.label(cx, ids!(space_name)).set_text(cx, &space_name);
-                        let avatar_ref = item.avatar(cx, ids!(avatar));
+                        item.label(ids!(space_name)).set_text(cx, &space_name);
+                        let avatar_ref = item.avatar(ids!(avatar));
                         match &space.space_avatar {
                             FetchedRoomAvatar::Text(text) => {
                                 avatar_ref.show_text(cx, None, None, text);
@@ -617,7 +626,7 @@ impl Widget for SpacesBar {
                             2..100 => format!("Found {len}\n{descriptor} spaces."),
                             100..  => format!("Found 99+\n{descriptor} spaces."),
                         };
-                        item.label(cx, ids!(label)).set_text(cx, &text);
+                        item.label(ids!(label)).set_text(cx, &text);
                         item
                     }
                     else {
@@ -771,7 +780,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(cx, ids!(spaces_list));
+                        let portal_list = self.view.portal_list(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));
@@ -787,7 +796,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(cx, ids!(spaces_list));
+        let portal_list = self.view.portal_list(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 2383cb180..e7da3fc20 100644
--- a/src/home/tombstone_footer.rs
+++ b/src/home/tombstone_footer.rs
@@ -14,68 +14,75 @@ 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";
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.TombstoneFooter = set_type_default() do #(TombstoneFooter::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+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> {
         visible: false,
         width: Fill,
-        height: Fit{max: FitBound.Rel{base: Base.Full, factor: 0.75}}
+        height: Fit { max: Rel { base: Full, factor: 0.625 } }
         flow: Down,
-        align: Align{x: 0.5}
+        align: {x: 0.5}
         padding: 20,
         spacing: 8
 
-        // make this a ScrollYView
-        scroll_bars: mod.widgets.ScrollBars {
-            show_scroll_x: false show_scroll_y: true
-            scroll_bar_y.drag_scrolling: true
-        }
-
         show_bg: true
-        draw_bg +: {
-            color: COLOR_SECONDARY
+        draw_bg: {
+            color: (COLOR_SECONDARY)
         }
 
-        replacement_reason := Label {
+        replacement_reason = <Label> {
             width: Fill, height: Fit,
-            flow: Flow.Right{wrap: true},
-            align: Align{x: 0.5}
-            draw_text +: {
+            flow: RightWrap,
+            align: {x: 0.5}
+            draw_text: {
                 color: (TYPING_NOTICE_TEXT_COLOR),
-                text_style: REGULAR_TEXT {font_size: 11}
+                text_style: <REGULAR_TEXT>{font_size: 11}
+                wrap: Word,
             }
         }
 
-        join_successor_button := RobrixPositiveIconButton {
+        join_successor_button = <RobrixIconButton> {
             padding: 15,
-            draw_icon.svg: (ICON_JOIN_ROOM)
-            icon_walk: Walk{width: 17, height: 17, margin: Inset{left: -2, right: -1} }
+            draw_icon: {
+                svg_file: (ICON_JOIN_ROOM),
+                color: (COLOR_FG_ACCEPT_GREEN),
+            }
+            icon_walk: {width: 17, height: 17, margin: {left: -2, right: -1} }
+
+            draw_bg: {
+                border_color: (COLOR_FG_ACCEPT_GREEN),
+                color: #f0fff0 // light green
+            }
+            draw_text: {
+                color: (COLOR_FG_ACCEPT_GREEN),
+            }
         }
 
-        successor_room_avatar := Avatar {
+        successor_room_avatar = <Avatar> {
             width: 30, height: 30,
-            cursor: MouseCursor.Default,
-            text_view +: {
-                text +: {
-                    draw_text +: {
-                        text_style: TITLE_TEXT { font_size: 13.0 }
-                    }
-                }
-            }
+            cursor: 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: Flow.Right{wrap: true},
-            align: Align{x: 0.5}
-            draw_text +: {
-                text_style: TITLE_TEXT { font_size: 12 }
+            flow: RightWrap,
+            align: {x: 0.5}
+            draw_text: {
+                text_style: <TITLE_TEXT>{ font_size: 12 }
                 color: (COLOR_TEXT)
+                wrap: Word,
             }
         }
     }
@@ -100,7 +107,7 @@ pub enum SuccessorRoomDetails {
 
 
 /// A view that shows information about a tombstoned room and its successor.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TombstoneFooter {
     #[deref] view: View,
     /// The ID of the current tombstoned room.
@@ -112,7 +119,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(cx, ids!(join_successor_button)).clicked(actions) {
+            if self.view.button(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;
@@ -139,10 +146,10 @@ impl TombstoneFooter {
         tombstoned_room_id: &OwnedRoomId,
         successor_room_details: &SuccessorRoomDetails,
     ) {
-        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));
+        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));
 
         log!("Showing TombstoneFooter for room {tombstoned_room_id}, Successor: {successor_room_details:?}");
         match successor_room_details {
@@ -189,12 +196,12 @@ impl TombstoneFooter {
                                 cx,
                                 None,
                                 None,
-                                room_preview.room_name_id.name_for_avatar().unwrap_or("?"),
+                                room_preview.room_name_id.name_for_avatar().as_deref().unwrap_or("?"),
                             );
                         }
                     }
                 }
-                match room_preview.room_name_id.name_for_avatar() {
+                match room_preview.room_name_id.name_for_avatar().as_deref() {
                     Some(n) => successor_room_name.set_text(cx, n),
                     _ => successor_room_name.set_text(cx, &format!("Unnamed Room, ID: {}", room_preview.room_name_id.room_id())),
                 }
diff --git a/src/home/welcome_screen.rs b/src/home/welcome_screen.rs
index 5e08674dc..887b1cadb 100644
--- a/src/home/welcome_screen.rs
+++ b/src/home/welcome_screen.rs
@@ -1,52 +1,51 @@
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::html_or_plaintext::*;
 
-    mod.widgets.WELCOME_TEXT_COLOR = #x4
+    WELCOME_TEXT_COLOR: #x4
 
-    mod.widgets.WelcomeScreen = SolidView {
+    pub WelcomeScreen = <ScrollYView> {
         width: Fill, height: Fill
-        align: Align{x: 0.0, y: 0.5}
+        align: {x: 0.0, y: 0.5}
 
         show_bg: true,
-        draw_bg.color: (COLOR_PRIMARY)
-
-        // make this a ScrollYView
-        scroll_bars: mod.widgets.ScrollBars {
-            show_scroll_x: false show_scroll_y: true
-            scroll_bar_y.drag_scrolling: true
+        draw_bg: {
+            color: (COLOR_PRIMARY),
         }
 
-        welcome_message := RoundedView {
+        welcome_message = <RoundedView> {
             padding: 40.
             width: Fill, height: Fit
             flow: Down, spacing: 20
 
-            draw_bg.color: (COLOR_PRIMARY)
-
-            title := Label {
+            title = <Label> {
                 text: "Welcome to Robrix!",
-                draw_text +: {
-                    color: (mod.widgets.WELCOME_TEXT_COLOR),
-                    text_style: theme.font_bold {
+                draw_text: {
+                    color: (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: Inset{top: 12, left: 0.}
+            <MessageHtml> {
+                padding: {top: 12, left: 0.}
                 font_size: 14.
-                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. },
+                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. },
                     //     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 eb8f5632c..3f8022a22 100644
--- a/src/join_leave_room_modal.rs
+++ b/src/join_leave_room_modal.rs
@@ -8,101 +8,130 @@ use makepad_widgets::*;
 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}, styles::{apply_negative_button_style, apply_neutral_button_style, apply_positive_button_style, apply_primary_button_style}}, sliding_sync::{MatrixRequest, submit_async_request}, space_service_sync::{SpaceRequest, SpaceRoomListAction}, utils::{self, RoomNameId}};
+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};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.JoinLeaveRoomModal = #(JoinLeaveRoomModal::register_widget(vm)) {
+    pub JoinLeaveRoomModal = {{JoinLeaveRoomModal}} {
         width: Fit
         height: Fit
 
-        RoundedView {
+        <RoundedView> {
             flow: Down
             width: 400
             height: Fit
-            padding: Inset{top: 30, right: 40, bottom: 20, left: 40}
+            padding: {top: 30, right: 40, bottom: 20, left: 40}
 
             show_bg: true
-            draw_bg.color: (COLOR_PRIMARY)
-            draw_bg.border_radius: 4.0
+            draw_bg: {
+                color: #fff
+                border_radius: 4.0
+            }
 
-            title_view := View {
+            title_view = <View> {
                 width: Fill,
                 height: Fit,
-                padding: Inset{top: 0, bottom: 25}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 25}
+                align: {x: 0.5, y: 0.0}
 
-                title := Label {
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 13},
+                title = <Label> {
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 13},
                         color: #000
+                        wrap: Word
                     }
                 }
             }
 
-            body := View {
+            body = <View> {
                 width: Fill,
                 height: Fit,
                 flow: Down,
 
-                description := Label {
+                description = <Label> {
                     width: Fill
-                    flow: Flow.Right{wrap: true}
-                    draw_text +: {
-                        text_style: REGULAR_TEXT {
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{
                             font_size: 11.5,
                         },
                         color: #000
+                        wrap: Word
                     }
                 }
 
-                View {
+                <View> {
                     width: Fill, height: Fit
                     flow: Right,
-                    padding: Inset{top: 20, bottom: 20}
-                    align: Align{x: 1.0, y: 0.5}
+                    padding: {top: 20, bottom: 20}
+                    align: {x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button := RobrixNegativeIconButton {
+                    cancel_button = <RobrixIconButton> {
                         width: 120,
-                        align: Align{x: 0.5, y: 0.5}
+                        align: {x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon.svg: (ICON_FORBIDDEN)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        draw_icon: {
+                            svg_file: (ICON_FORBIDDEN)
+                            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)
+                        }
                         text: "Cancel"
+                        draw_text:{
+                            color: (COLOR_FG_DANGER_RED),
+                        }
                     }
 
-                    accept_button := RobrixPositiveIconButton {
+                    accept_button = <RobrixIconButton> {
                         width: 120,
-                        align: Align{x: 0.5, y: 0.5}
+                        align: {x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon.svg: (ICON_CHECKMARK)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        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)
+                        }
                         text: "Yes"
+                        draw_text:{
+                            color: (COLOR_FG_ACCEPT_GREEN),
+                        }
                     }
                 }
 
-                tip_view := View {
+                tip_view = <View> {
                     width: Fill,
                     height: Fit,
-                    align: Align{x: 0.5, y: 0.0}
+                    align: {x: 0.5, y: 0.0}
 
-                    tip := Label {
+                    tip = <Label> {
                         padding: 0,
                         margin: 0,
                         width: Fill,
                         height: Fit,
-                        flow: Flow.Right{wrap: true},
-                        align: Align{x: 0.5}
-                        draw_text +: {
-                            text_style: REGULAR_TEXT {
+                        flow: RightWrap,
+                        align: {x: 0.5}
+                        draw_text: {
+                            text_style: <REGULAR_TEXT>{
                                 font_size: 9,
                             },
                             color: #A,
+                            wrap: Word
                         }
                         text: "Tip: hold Shift when clicking a button to bypass this prompt."
                     }
@@ -112,7 +141,7 @@ script_mod! {
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct JoinLeaveRoomModal {
     #[deref] view: View,
     #[rust] kind: Option<JoinLeaveModalKind>,
@@ -216,8 +245,8 @@ impl Widget for JoinLeaveRoomModal {
 
 impl WidgetMatchEvent for JoinLeaveRoomModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let mut accept_button = self.view.button(cx, ids!(accept_button));
-        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let accept_button = self.view.button(ids!(accept_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
 
         let cancel_clicked = cancel_button.clicked(actions);
         if cancel_clicked ||
@@ -311,9 +340,9 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                     }
                 }
 
-                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);
+                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);
                 accept_button.set_text(cx, accept_button_text);
                 accept_button.set_enabled(cx, false);
                 needs_redraw = true;
@@ -329,18 +358,18 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                         PopupKind::Success,
                         Some(3.0),
                     );
-                    self.view.label(cx, ids!(title)).set_text(cx, "Joined room!");
-                    self.view.label(cx, ids!(description)).set_text(cx, &format!(
+                    self.view.label(ids!(title)).set_text(cx, "Joined room!");
+                    self.view.label(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(cx, ids!(title)).set_text(cx, "Error joining room!");
+                    self.view.label(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(cx, ids!(description)).set_text(cx, &msg);
+                    self.view.label(ids!(description)).set_text(cx, &msg);
                     enqueue_popup_notification(
                         msg,
                         PopupKind::Error,
@@ -371,8 +400,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                         );
                         popup_msg = "Successfully left room.".into();
                     }
-                    self.view.label(cx, ids!(title)).set_text(cx, title);
-                    self.view.label(cx, ids!(description)).set_text(cx, &description);
+                    self.view.label(ids!(title)).set_text(cx, title);
+                    self.view.label(ids!(description)).set_text(cx, &description);
                     enqueue_popup_notification(popup_msg, PopupKind::Success, Some(5.0));
                     new_final_success = Some(true);
                 }
@@ -390,8 +419,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                         popup_msg = "Failed to leave room.".into();
                     }
 
-                    self.view.label(cx, ids!(title)).set_text(cx, title);
-                    self.view.label(cx, ids!(description)).set_text(cx, &description);
+                    self.view.label(ids!(title)).set_text(cx, title);
+                    self.view.label(ids!(description)).set_text(cx, &description);
                     enqueue_popup_notification(popup_msg, PopupKind::Error, None);
                     new_final_success = Some(false);
                 }
@@ -414,8 +443,8 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
                             new_final_success = Some(false);
                         }
                     }
-                    self.view.label(cx, ids!(title)).set_text(cx, title);
-                    self.view.label(cx, ids!(description)).set_text(cx, &description);
+                    self.view.label(ids!(title)).set_text(cx, title);
+                    self.view.label(ids!(description)).set_text(cx, &description);
                 }
             }
         }
@@ -423,9 +452,20 @@ impl WidgetMatchEvent for JoinLeaveRoomModal {
         if let Some(success) = new_final_success {
             self.final_success = Some(success);
             needs_redraw = true;
-            accept_button.set_enabled(cx, true);
-            accept_button.set_text(cx, "Okay");
-            apply_primary_button_style(cx, &mut accept_button);
+            accept_button.apply_over(cx, live!{
+                enabled: true
+                text: "Okay"
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY),
+                    border_color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_text: {
+                    color: (COLOR_PRIMARY)
+                }
+                draw_icon: {
+                    color: (COLOR_PRIMARY)
+                }
+            });
             accept_button.reset_hover(cx);
             cancel_button.set_visible(cx, false);
         }
@@ -508,37 +548,32 @@ impl JoinLeaveRoomModal {
             }
         }
 
-        self.view.label(cx, ids!(title)).set_text(cx, title);
-        self.view.label(cx, ids!(description)).set_text(cx, &description);
+        self.view.label(ids!(title)).set_text(cx, title);
+        self.view.label(ids!(description)).set_text(cx, &description);
         if show_tip {
-            self.view.view(cx, ids!(tip_view)).set_visible(cx, true);
-            self.view.label(cx, ids!(tip)).set_text(cx, &format!(
+            self.view.view(ids!(tip_view)).set_visible(cx, true);
+            self.view.label(ids!(tip)).set_text(cx, &format!(
                 "Tip: hold Shift when clicking the \"{tip_button}\" button to bypass this prompt.",
             ));
         } else {
-            self.view.view(cx, ids!(tip_view)).set_visible(cx, false);
+            self.view.view(ids!(tip_view)).set_visible(cx, false);
         }
 
-        let mut accept_button = self.button(cx, ids!(accept_button));
-        let mut cancel_button = self.button(cx, ids!(cancel_button));
+        let accept_button = self.button(ids!(accept_button));
+        let cancel_button = self.button(ids!(cancel_button));
         accept_button.set_text(cx, "Yes");
-
-        let is_negative = matches!(kind,
-            JoinLeaveModalKind::RejectInvite(_)
-            | JoinLeaveModalKind::LeaveRoom(_)
-            | JoinLeaveModalKind::LeaveSpace { .. }
-        );
-
-        if is_negative {
-            // Negative action: accept button is red, cancel button is gray/neutral.
-            apply_negative_button_style(cx, &mut accept_button);
-            apply_neutral_button_style(cx, &mut cancel_button);
-        } else {
-            // Positive action: accept button is green, cancel button is red/negative.
-            apply_positive_button_style(cx, &mut accept_button);
-            apply_negative_button_style(cx, &mut cancel_button);
-        }
-
+        accept_button.apply_over(cx, live!{
+            draw_bg: {
+                border_color: (COLOR_FG_ACCEPT_GREEN),
+                color: (COLOR_BG_ACCEPT_GREEN)
+            }
+            draw_text: {
+                color: (COLOR_FG_ACCEPT_GREEN)
+            }
+            draw_icon: {
+                color: (COLOR_FG_ACCEPT_GREEN)
+            }
+        });
         accept_button.set_enabled(cx, true);
         accept_button.set_visible(cx, true);
         accept_button.reset_hover(cx);
diff --git a/src/lib.rs b/src/lib.rs
index 346c0314b..447520c55 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -2,40 +2,10 @@
 
 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 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.
diff --git a/src/login/login_screen.rs b/src/login/login_screen.rs
index 3b3c322a1..09eb8a9b6 100644
--- a/src/login/login_screen.rs
+++ b/src/login/login_screen.rs
@@ -7,33 +7,39 @@ use crate::sliding_sync::{submit_async_request, LoginByPassword, LoginRequest, M
 
 use super::login_status_modal::{LoginStatusModalAction, LoginStatusModalWidgetExt};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::login::login_status_modal::*;
 
-    mod.widgets.IMG_APP_LOGO = crate_resource("self://resources/robrix_logo_alpha.png")
+    IMG_APP_LOGO = dep("crate://self/resources/robrix_logo_alpha.png")
+    ICON_SEARCH = dep("crate://self/resources/icons/search.svg")
 
-    mod.widgets.SsoButton = RoundedView {
+    SsoButton = <RoundedView> {
         width: Fit,
         height: Fit,
-        cursor: MouseCursor.Hand,
+        cursor: Hand,
         visible: true,
         padding: 10,
-        margin: Inset{ left: 16.6, right: 16.6, top: 10, bottom: 10}
-        draw_bg +: {
-            border_size: 0.5
-            border_color: #6c6c6c
+        margin: { left: 16.6, right: 16.6, top: 10, bottom: 10}
+        draw_bg: {
+            border_size: 0.5,
+            border_color: (#6c6c6c),
             color: (COLOR_PRIMARY)
         }
     }
 
-    mod.widgets.SsoImage = Image {
+    SsoImage = <Image> {
         width: 30, height: 30,
-        draw_bg +: {
-            mask: instance(0.0)
-            pixel: fn() {
-                let color = self.get_color();
+        draw_bg:{
+            uniform mask: 0.0
+            fn pixel(self) -> vec4 {
+                let color = sample2d(self.image, self.pos).xyzw;
                 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;
@@ -42,25 +48,23 @@ script_mod! {
     }
 
 
-    mod.widgets.LoginScreen = set_type_default() do #(LoginScreen::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub LoginScreen = {{LoginScreen}} {
         width: Fill, height: Fill,
-        align: Align{x: 0.5, y: 0.5}
+        align: {x: 0.5, y: 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: #FFF
         }
 
-        ScrollYView {
+        <ScrollYView> {
             width: Fill, height: Fill,
             // Note: *do NOT* vertically center this, it will break scrolling.
-            align: Align{x: 0.5}
+            align: {x: 0.5}
             show_bg: true,
-            draw_bg.color: (COLOR_SECONDARY)
-            // draw_bg.color: (COLOR_PRIMARY) // TODO: once Makepad supports `Fill {max: 375}`, change this back to COLOR_PRIMARY
-   
+            draw_bg: {
+                color: (COLOR_SECONDARY)
+                // 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: {
@@ -69,53 +73,53 @@ script_mod! {
                 }
             }
 
-            RoundedView {
-                margin: Inset{top: 40, bottom: 40}
+            <RoundedView> {
+                margin: {top: 40, bottom: 40}
                 width: Fill // TODO: once Makepad supports it, use `Fill {max: 375}`
                 height: Fit
-                align: Align{x: 0.5, y: 0.5}
+                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: Align{x: 0.5, y: 0.5}
-                    padding: Inset{top: 30, bottom: 30}
-                    margin: Inset{top: 40, bottom: 40}
+                    align: {x: 0.5, y: 0.5}
+                    padding: {top: 30, bottom: 30}
+                    margin: {top: 40, bottom: 40}
                     spacing: 15.0
 
-                    logo_image := Image {
-                        fit: ImageFit.Smallest,
+                    logo_image = <Image> {
+                        fit: Smallest,
                         width: 80
-                        src: (mod.widgets.IMG_APP_LOGO),
+                        source: (IMG_APP_LOGO),
                     }
 
-                    title := Label {
+                    title = <Label> {
                         width: Fit, height: Fit
-                        margin: Inset{ bottom: 5 }
+                        margin: { 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 := RobrixTextInput {
+                    user_id_input = <SimpleTextInput> {
                         width: 275, height: Fit
                         flow: Right, // do not wrap
                         padding: 10,
                         empty_text: "User ID"
                     }
 
-                    password_input := RobrixTextInput {
+                    password_input = <SimpleTextInput> {
                         width: 275, height: Fit
                         flow: Right, // do not wrap
                         padding: 10,
@@ -123,146 +127,168 @@ script_mod! {
                         is_password: true,
                     }
 
-                    View {
+                    <View> {
                         width: 275, height: Fit,
                         flow: Down,
 
-                        homeserver_input := RobrixTextInput {
+                        homeserver_input = <SimpleTextInput> {
                             width: 275, height: Fit,
                             flow: Right, // do not wrap
-                            padding: Inset{top: 5, bottom: 5, left: 10, right: 10}
+                            padding: {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: Inset{top: 3, left: 2, right: 2}
+                            padding: {top: 3, left: 2, right: 2}
                             spacing: 0.0,
-                            align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
+                            align: {x: 0.5, y: 0.5} // center horizontally and vertically
 
-                            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)"
                             }
 
-                            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: Inset{top: 5, bottom: 10}
-                        align: Align{x: 0.5, y: 0.5}
+                        margin: {top: 5, bottom: 10}
+                        align: {x: 0.5, y: 0.5}
+                        draw_bg: {
+                            color: (COLOR_ACTIVE_PRIMARY)
+                        }
+                        draw_text: {
+                            color: (COLOR_PRIMARY)
+                            text_style: <REGULAR_TEXT> {}
+                        }
                         text: "Login"
                     }
 
-                    LineH {
+                    left_line = <LineH> {
                         width: 275
-                        margin: Inset{bottom: -5}
-                        draw_bg.color: #C8C8C8
+                        margin: {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: 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")
+                        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")
                             }
                         }
-                        facebook_button := mod.widgets.SsoButton {
-                            image := mod.widgets.SsoImage {
-                                src: crate_resource("self://resources/img/facebook.png")
+                        facebook_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/facebook.png")
                             }
                         }
-                        github_button := mod.widgets.SsoButton {
-                            image := mod.widgets.SsoImage {
-                                src: crate_resource("self://resources/img/github.png")
+                        github_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/github.png")
                             }
                         }
-                        gitlab_button := mod.widgets.SsoButton {
-                            image := mod.widgets.SsoImage {
-                                src: crate_resource("self://resources/img/gitlab.png")
+                        gitlab_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/gitlab.png")
                             }
                         }
-                        google_button := mod.widgets.SsoButton {
-                            image := mod.widgets.SsoImage {
-                                src: crate_resource("self://resources/img/google.png")
+                        google_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/google.png")
                             }
                         }
-                        twitter_button := mod.widgets.SsoButton {
-                            image := mod.widgets.SsoImage {
-                                src: crate_resource("self://resources/img/x.png")
+                        twitter_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/x.png")
                             }
                         }
                     }
 
-                    View {
+                    <View> {
                         width: 275,
                         height: Fit,
                         flow: Right,
                         // padding: 3,
                         spacing: 0.0,
-                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
+                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
 
-                        LineH { draw_bg.color: #C8C8C8 }
+                        left_line = <LineH> {
+                            draw_bg: { color: #C8C8C8 }
+                        }
 
-                        Label {
+                        <Label> {
                             width: Fit, height: Fit
-                            padding: Inset{left: 1, right: 1, top: 0, bottom: 0}
-                            draw_text +: {
+                            padding: {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?"
                         }
 
-                        LineH { draw_bg.color: #C8C8C8 }
+                        right_line = <LineH> {
+                            draw_bg: { color: #C8C8C8 }
+                        }
                     }
                     
-                    signup_button := RobrixIconButton {
+                    signup_button = <RobrixIconButton> {
                         width: Fit, height: Fit
-                        padding: Inset{left: 15, right: 15, top: 10, bottom: 10}
-                        margin: Inset{bottom: 5}
-                        align: Align{x: 0.5, y: 0.5}
+                        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: {
+                            color: (COLOR_PRIMARY)
+                            text_style: <REGULAR_TEXT> {}
+                        }
+
                         text: "Sign up here"
                     }
                 }
 
                 // 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: Align{x: 0.5, y: 0.5},
+                    // align: {x: 0.5, y: 0.5},
                     can_dismiss: false,
-                    content +: {
-                        login_status_modal_inner := mod.widgets.LoginStatusModal {}
+                    content: {
+                        login_status_modal_inner = <LoginStatusModal> {}
                     }
                 }
             }
@@ -272,9 +298,8 @@ script_mod! {
 
 static MATRIX_SIGN_UP_URL: &str = "https://matrix.org/docs/chat_basics/matrix-for-im/#creating-a-matrix-account";
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, 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,
@@ -296,14 +321,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(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_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_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));
+        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));
 
         if signup_button.clicked(actions) {
             log!("Opening URL \"{}\"", MATRIX_SIGN_UP_URL);
@@ -321,15 +346,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(cx).set_text(cx, "Okay");
+                login_status_modal_inner.button_ref().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(cx).set_text(cx, "Okay");
+                login_status_modal_inner.button_ref().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(cx).set_text(cx, "Cancel");
+                login_status_modal_inner.button_ref().set_text(cx, "Cancel");
                 submit_async_request(MatrixRequest::Login(LoginRequest::LoginByPassword(LoginByPassword {
                     user_id,
                     password,
@@ -365,7 +390,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(cx);
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
                     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);
@@ -373,7 +398,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(cx);
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
                     login_status_modal_button.set_text(cx, "Cancel");
                     login_status_modal_button.set_enabled(cx, true);
                     login_status_modal.open(cx);
@@ -391,22 +416,26 @@ 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(cx);
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
                     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)) => {
-                    let mask = if *pending { 1.0 } else { 0.0 };
-                    let cursor = if *pending { MouseCursor::NotAllowed } else { MouseCursor::Hand };
-                    for view_ref in self.view_set(cx, button_set).iter() {
+                    for view_ref in self.view_set(button_set).iter() {
                         let Some(mut 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)
-                        });
-                        view_mut.cursor = Some(cursor);
+                        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 } }
+                            });
+                        }
                     }
                     self.sso_pending = *pending;
                     self.redraw(cx);
@@ -420,7 +449,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(cx);
+            let login_status_modal_button = login_status_modal_inner.button_ref();
             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);
@@ -430,7 +459,7 @@ impl MatchEvent for LoginScreen {
         }
 
         // Handle any of the SSO login buttons being clicked
-        for (view_ref, brand) in self.view_set(cx, button_set).iter().zip(&provider_brands) {
+        for (view_ref, brand) in self.view_set(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),
@@ -444,7 +473,7 @@ impl MatchEvent for LoginScreen {
 }
 
 /// Actions sent to or from the login screen.
-#[derive(Clone, Default, Debug)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum LoginAction {
     /// A positive response from the backend Matrix task to the login screen.
     LoginSuccess,
@@ -474,6 +503,5 @@ 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 ee92a87cc..0419b2bd6 100644
--- a/src/login/login_status_modal.rs
+++ b/src/login/login_status_modal.rs
@@ -1,70 +1,80 @@
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
     // A modal dialog that displays the status of a login attempt.
-    mod.widgets.LoginStatusModal = #(LoginStatusModal::register_widget(vm)) {
+    pub LoginStatusModal = {{LoginStatusModal}} {
         width: Fit,
         height: Fit
-        align: Align{x: 0.5}
+        align: {x: 0.5}
 
-        RoundedView {
-            width: 350
+        <RoundedView> {
+            // Halfway between the login screen background (320 px wide)
+            // and the login screen's buttons/content (250 px wide).
+            width: ((320+250)/2),
             height: Fit,
             flow: Down,
-            align: Align{x: 0.5}
+            align: {x: 0.5}
             padding: 25,
             spacing: 10,
 
             show_bg: true
-            draw_bg +: {
+            draw_bg: {
                 color: #CCC
-                border_radius: 4.0
+                border_radius: 3.0
             }
 
-            View {
+            <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: Inset{top: 0, bottom: 10}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 10}
+                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: Inset{top: 5, bottom: 5}
-                align: Align{x: 0.5, y: 0.0}
-                flow: Flow.Right{wrap: true}
-                draw_text +: {
-                    text_style: REGULAR_TEXT {
+                margin: {top: 5, bottom: 5}
+                draw_text: {
+                    text_style: <REGULAR_TEXT>{
                         font_size: 11.5,
                     },
                     color: #000
+                    wrap: Word
                 }
             }
 
-            View {
+            <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                align: Align{x: 1.0}
-                margin: Inset{top: 10}
+                align: {x: 1.0}
+                margin: {top: 10}
 
-                button := RobrixIconButton {
-                    align: Align{x: 0.5, y: 0.5}
+                button = <RobrixIconButton> {
+                    align: {x: 0.5, y: 0.5}
                     width: Fit, height: Fit
                     padding: 12
+                    draw_bg: {
+                        color: (COLOR_ACTIVE_PRIMARY)
+                    }
+                    draw_text: {
+                        color: (COLOR_PRIMARY)
+                        text_style: <REGULAR_TEXT> {}
+                    }
                     text: "Cancel"
                 }
             }
@@ -73,14 +83,13 @@ script_mod! {
 }
 
 /// A modal dialog that displays the status of a login attempt.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct LoginStatusModal {
     #[deref] view: View,
 }
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum LoginStatusModalAction {
-    #[default]
     None,
     Close,
 }
@@ -97,9 +106,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(cx, ids!(button));
+        let button = self.button(ids!(button));
 
         let modal_dismissed = actions
             .iter()
@@ -113,7 +122,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,  LoginStatusModalAction::Close);
+                cx.widget_action(widget_uid, &scope.path, LoginStatusModalAction::Close);
             }
         }
     }
@@ -122,17 +131,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(cx, ids!(title)).set_text(cx, title);
+        self.label(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(cx, ids!(status)).set_text(cx, status);
+        self.label(ids!(status)).set_text(cx, status);
     }
 
     /// Returns a reference to the modal's button, enabling you to set its properties.
-    fn button_ref(&self, cx: &mut Cx) -> ButtonRef {
-        self.button(cx, ids!(button))
+    fn button_ref(&self) -> ButtonRef {
+        self.button(ids!(button))
     }
 }
 
@@ -152,9 +161,9 @@ impl LoginStatusModalRef {
     }
 
     /// See [`LoginStatusModal::button_ref()`].
-    pub fn button_ref(&self, cx: &mut Cx) -> ButtonRef {
+    pub fn button_ref(&self) -> ButtonRef {
         self.borrow()
-            .map(|inner| inner.button_ref(cx))
+            .map(|inner| inner.button_ref())
             .unwrap_or_default()
     }
 }
diff --git a/src/login/mod.rs b/src/login/mod.rs
index 13d5b39bd..f269c0e11 100644
--- a/src/login/mod.rs
+++ b/src/login/mod.rs
@@ -1,9 +1,9 @@
-use makepad_widgets::ScriptVm;
+use makepad_widgets::*;
 
 pub mod login_screen;
 pub mod login_status_modal;
 
-pub fn script_mod(vm: &mut ScriptVm) {
-    login_status_modal::script_mod(vm);
-    login_screen::script_mod(vm);
+pub fn live_design(cx: &mut Cx) {
+    login_screen::live_design(cx);
+    login_status_modal::live_design(cx);
 }
diff --git a/src/logout/logout_confirm_modal.rs b/src/logout/logout_confirm_modal.rs
index 506162acf..3631d1ca0 100644
--- a/src/logout/logout_confirm_modal.rs
+++ b/src/logout/logout_confirm_modal.rs
@@ -2,80 +2,97 @@ use std::sync::Arc;
 
 use makepad_widgets::*;
 use tokio::sync::Notify;
-use crate::sliding_sync::{submit_async_request, MatrixRequest};
+use crate::{shared::styles::COLOR_FG_DANGER_RED, sliding_sync::{submit_async_request, MatrixRequest}};
 use super::logout_state_machine::is_logout_past_point_of_no_return;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
     // A modal dialog that displays logout confirmation
-    mod.widgets.LogoutConfirmModal = #(LogoutConfirmModal::register_widget(vm)) {
+    pub LogoutConfirmModal = {{LogoutConfirmModal}} {
         width: Fit,
         height: Fit,
 
-        RoundedView {
+        <RoundedView> {
             width: 400,
             height: Fit,
             flow: Down,
-            align: Align{x: 0.5},
+            align: {x: 0.5},
             padding: 25,
-            margin: 0
             spacing: 10,
 
             show_bg: true,
-            draw_bg.color: (COLOR_PRIMARY)
+            draw_bg: {
+                color: #FFFFFF
+            }
+            margin: 0
 
-            View {
+            <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right,
-                padding: Inset{top: 0, bottom: 10},
-                align: Align{x: 0.5, y: 0.0},
+                padding: {top: 0, bottom: 10},
+                align: {x: 0.5, y: 0.0},
 
-                title := Label {
+                title = <Label> {
                     text: "Confirm Logout",
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 18},
-                        color: #000000
+                    draw_text: {
+                            text_style: <TITLE_TEXT>{font_size: 18},
+                            color: #000000
                     }
                 }
             }
 
-            message := Label {
+            message = <Label> {
                 width: Fill,
-                margin: Inset{top: 10, bottom: 20},
-                flow: Flow.Right{wrap: true},
-                draw_text +: {
-                    text_style: REGULAR_TEXT {
+                margin: {top: 10, bottom: 20},
+                draw_text: {
+                    text_style: <REGULAR_TEXT>{
                         font_size: 14,
                     },
                     color: #000000,
+                    wrap: Word
                 },
                 text: "Are you sure you want to logout?"
             }
 
-            View {
+            <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right,
-                align: Align{x: 0.5, y: 0.5},
+                align: {x: 0.5, y: 0.5},
                 spacing: 10.0,
 
-                cancel_button := RobrixNeutralIconButton {
+                cancel_button = <RobrixIconButton> {
                     width: Fit, height: Fit,
                     padding: 10,
+                    draw_bg: {
+                        color: (COLOR_SECONDARY)
+                    },
                     text: "Cancel"
-                    draw_text.text_style: REGULAR_TEXT {font_size: 14}
+                    draw_text: {
+                        color: (COLOR_TEXT)
+                        text_style: <REGULAR_TEXT> {font_size: 14}
+                    },
                 }
 
-                confirm_button := RobrixNegativeIconButton {
+                confirm_button = <RobrixIconButton> {
                     width: Fit, height: Fit,
                     padding: 10,
-                    draw_icon.svg: (ICON_LOGOUT)
+                    draw_bg: { color: (COLOR_BG_DANGER_RED) },
+                    draw_icon: {
+                            svg_file: (ICON_LOGOUT)
+                            color: (COLOR_FG_DANGER_RED),
+                    },
                     text: "Logout Now"
-                    draw_text.text_style: REGULAR_TEXT {font_size: 14}
+                    draw_text: {
+                        color: (COLOR_FG_DANGER_RED)
+                        text_style: <REGULAR_TEXT> {font_size: 14}
+                    },
                 }
             }
         }
@@ -83,7 +100,7 @@ script_mod! {
 }
 
 /// A modal dialog that displays logout confirmation.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, 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.
@@ -95,7 +112,7 @@ pub struct LogoutConfirmModal {
 }
 
 /// Actions handled by the parent widget of the [`LogoutConfirmModal`].
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum LogoutConfirmModalAction {
     /// The modal should be opened
     Open,
@@ -107,7 +124,6 @@ pub enum LogoutConfirmModalAction {
         /// Whether the modal was dismissed by the user clicking an internal button.
         was_internal: bool,
     },
-    #[default]
     None,
 }
 
@@ -156,13 +172,12 @@ 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, Default)]
+#[derive(Clone, Copy, Debug, DefaultNone)]
 pub enum ClearedComponentType {
     /// The Matrix client was cleared during logout
     Client,
     /// The sync service was cleared during logout
     SyncService,
-    #[default]
     None,
 }
 
@@ -179,8 +194,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(cx, ids!(cancel_button));
-        let mut confirm_button = self.button(cx, ids!(confirm_button));
+        let cancel_button = self.button(ids!(cancel_button));
+        let confirm_button = self.button(ids!(confirm_button));
 
         let modal_dismissed = actions.iter().any(|a| matches!(a.downcast_ref(), Some(ModalAction::Dismissed)));
         let cancel_clicked = cancel_button.clicked(actions);
@@ -230,13 +245,13 @@ impl WidgetMatchEvent for LogoutConfirmModal {
 
                 Some(LogoutAction::LogoutFailure(error)) => {
                     if is_logout_past_point_of_no_return() {
-                        self.label(cx, ids!(title)).set_text(cx, "Logout error, please restart Robrix.");
+                        self.label(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");
-                        script_apply_eval!(cx, confirm_button, {
-                            draw_bg +: {
-                                color: mod.widgets.COLOR_FG_DANGER_RED
+                        confirm_button.apply_over(cx, live!{
+                            draw_bg: {
+                                color: (COLOR_FG_DANGER_RED)
                             }
                         });
                         confirm_button.set_enabled(cx, true);
@@ -255,13 +270,13 @@ impl WidgetMatchEvent for LogoutConfirmModal {
                 }
 
                 Some(LogoutAction::ApplicationRequiresRestart { .. }) => {
-                    self.label(cx, ids!(title)).set_text(cx, "Logout error, please restart Robrix.");
+                    self.label(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");
-                    script_apply_eval!(cx, confirm_button, {
-                        draw_bg +: {
-                            color: mod.widgets.COLOR_FG_DANGER_RED
+                    confirm_button.apply_over(cx, live!{
+                        draw_bg: {
+                            color: (COLOR_FG_DANGER_RED)
                         }
                     });
                     confirm_button.set_enabled(cx, true);
@@ -295,12 +310,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(cx, ids!(message)).set_text(cx, message);
+        self.label(ids!(message)).set_text(cx, message);
     }
 
     fn reset_state(&mut self, cx: &mut Cx) {
-        let cancel_button = self.button(cx, ids!(cancel_button));
-        let confirm_button = self.button(cx, ids!(confirm_button));
+        let cancel_button = self.button(ids!(cancel_button));
+        let confirm_button = self.button(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 3ccb922ca..1f6f4a551 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 9112d192d..1b2434da6 100644
--- a/src/logout/mod.rs
+++ b/src/logout/mod.rs
@@ -1,9 +1,9 @@
-use makepad_widgets::ScriptVm;
+use makepad_widgets::*;
 
 pub mod logout_confirm_modal;
 pub mod logout_state_machine;
 pub mod logout_errors;
 
-pub fn script_mod(vm: &mut ScriptVm) {
-    logout_confirm_modal::script_mod(vm);
-}
+pub fn live_design(cx: &mut Cx) {
+    logout_confirm_modal::live_design(cx);
+}
\ No newline at end of file
diff --git a/src/persistence/matrix_state.rs b/src/persistence/matrix_state.rs
index d99855b7c..813ab6405 100644
--- a/src/persistence/matrix_state.rs
+++ b/src/persistence/matrix_state.rs
@@ -169,7 +169,7 @@ pub async fn restore_session(
         serde_json::from_str(&serialized_session)?;
 
     let status_str = format!(
-        "Loaded session file for:\n{user_id}\n\nTrying to connect to homeserver...\n{}",
+        "Loaded session file for {user_id}. Trying to connect to homeserver ({})...",
         client_session.homeserver,
     );
     log!("{status_str}");
diff --git a/src/profile/mod.rs b/src/profile/mod.rs
index 30b3576e8..0d1b7f92c 100644
--- a/src/profile/mod.rs
+++ b/src/profile/mod.rs
@@ -1,8 +1,8 @@
-use makepad_widgets::ScriptVm;
+use makepad_widgets::Cx;
 
 pub mod user_profile;
 pub mod user_profile_cache;
 
-pub fn script_mod(vm: &mut ScriptVm) {
-    user_profile::script_mod(vm);
+pub fn live_design(cx: &mut Cx) {
+    user_profile::live_design(cx);
 }
diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index cedbbeba3..a8ce2ea62 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -60,224 +60,277 @@ impl DerefMut for UserProfileAndRoomId {
     }
 }
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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 link::tsp_link::TspVerifyUser;
 
-    mod.widgets.ICON_DOUBLE_CHAT = crate_resource("self://resources/icons/double_chat.svg")
+    ICON_DOUBLE_CHAT = dep("crate://self/resources/icons/double_chat.svg")
 
-    let UserProfileView = ScrollXYView {
+    UserProfileView = <ScrollXYView> {
         width: Fill,
         height: Fill,
-        align: Align{x: 0.5, y: 0},
-        padding: Inset{left: 15, right: 15, top: 15, bottom: 50}
+        align: {x: 0.5, y: 0},
+        padding: {left: 15, right: 15, top: 15, bottom: 50}
         spacing: 20,
         flow: Down,
-        cursor: MouseCursor.Default,
+        cursor: Default,
 
-        personal_info := View {
+        show_bg: true,
+        draw_bg: {
+            color: (COLOR_PRIMARY)
+        }
+
+        personal_info = <View> {
             width: Fill, height: Fit
-            align: Align{x: 0.5, y: 0.0}
-            padding: Inset{left: 10, right: 10}
+            align: {x: 0.5, y: 0.0}
+            padding: {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: theme.font_regular { font_size: 40.0 }
-                        }
-                    }
-                }
+                text_view = { text = { draw_text: {
+                    text_style: { font_size: 40.0 }
+                }}}
             }
 
-            user_name := Label {
+            user_name = <Label> {
                 width: Fill, height: Fit
-                align: Align{x: 0.5}
-                flow: Flow.Right{wrap: true}
-                draw_text +: {
+                align: {x: 0.5}
+                draw_text: {
+                    wrap: Word,
                     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: Align{x: 0.5}
-                flow: Flow.Right{wrap: true}
-                draw_text +: {
+                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: Align{x: 0.0, y: 0.0}
-            padding: Inset{left: 10, right: 10}
+            align: {x: 0.0, y: 0.0}
+            padding: {left: 10, right: 10}
 
-            membership_title_label := Label {
+            membership_title_label = <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true}
-                draw_text +: {
-                    text_style: USERNAME_TEXT_STYLE { font_size: 11.5 },
+                draw_text: {
+                    wrap: Word,
+                    text_style: <USERNAME_TEXT_STYLE>{ font_size: 11.5 },
                     color: #000
                 }
                 text: "Membership in this room"
             }
 
-            membership_status_label := Label {
-                margin: Inset{ left: 7 }
+            membership_status_label = <Label> {
+                margin: { left: 7 }
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true}
-                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: Inset{ left: 7 }
+            role_info_label = <Label> {
+                margin: { left: 7 }
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true}
-                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: Inset{left: 10., right: 10, bottom: 10}
+            padding: {left: 10., right: 10, bottom: 10}
 
-            Label {
+            <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true}
-                draw_text +: {
-                    text_style: USERNAME_TEXT_STYLE { font_size: 11.5 },
+                draw_text: {
+                    wrap: Line,
+                    text_style: <USERNAME_TEXT_STYLE>{ font_size: 11.5 },
                     color: #000
                 }
                 text: "Actions"
             }
 
-            direct_message_button := RobrixIconButton {
+            direct_message_button = <RobrixIconButton> {
                 margin: 0,
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                draw_icon.svg: (mod.widgets.ICON_DOUBLE_CHAT)
-                icon_walk: Walk{width: 22, height: 16, margin: Inset{left: -5, right: -3, top: 1, bottom: -1} }
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_DOUBLE_CHAT)
+                    color: (COLOR_PRIMARY)
+                }
+                draw_text: {
+                    color: (COLOR_PRIMARY)
+                    text_style: <REGULAR_TEXT> {}
+                }
+                icon_walk: {width: 22, height: 16, margin: {left: -5, right: -3, top: 1, bottom: -1} }
                 text: "Direct Message"
             }
 
-            copy_link_to_user_button := RobrixNeutralIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+            copy_link_to_user_button = <RobrixIconButton> {
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
                 margin: 0,
-                draw_icon.svg: (ICON_COPY)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -1, right: -1} }
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_COPY)
+                }
+                icon_walk: {width: 16, height: 16, margin: {left: -1, right: -1} }
                 text: "Copy Link to User"
             }
 
-            jump_to_read_receipt_button := RobrixNeutralIconButton {
+            jump_to_read_receipt_button = <RobrixIconButton> {
                 enabled: false, // TODO: support this button
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
                 margin: 0,
-                draw_icon.svg: (ICON_JUMP)
-                icon_walk: Walk{width: 14, height: 16, margin: Inset{left: -1, right: 1.5}}
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_JUMP)
+                }
+                icon_walk: {width: 14, height: 16, margin: {left: -1, right: 1.5}}
                 text: "Jump to Read Receipt"
             }
 
-            ignore_user_button := RobrixNegativeIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+            ignore_user_button = <RobrixIconButton> {
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
                 margin: 0,
-                draw_icon.svg: (ICON_FORBIDDEN)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -0.5} }
+                draw_icon: {
+                    svg_file: (ICON_FORBIDDEN)
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                icon_walk: {width: 16, height: 16, margin: {left: -2, right: -0.5} }
+
+                draw_bg: {
+                    border_color: (COLOR_FG_DANGER_RED),
+                    color: (COLOR_BG_DANGER_RED)
+                }
                 text: "Ignore (Block) User"
+                draw_text:{
+                    color: (COLOR_FG_DANGER_RED),
+                }
             }
         }
 
         // 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> { }
     }
 
 
-    mod.widgets.UserProfileSlidingPane = #(UserProfileSlidingPane::register_widget(vm)) {
+    pub UserProfileSlidingPane = {{UserProfileSlidingPane}} {
         visible: false,
         flow: Overlay,
         width: Fill,
         height: Fill,
-        align: Align{x: 1.0, y: 0}
+        align: {x: 1.0, y: 0}
 
-        bg_view := SolidView {
+        bg_view = <View> {
             width: Fill
             height: Fill
             visible: false,
             show_bg: true
-            draw_bg.color: #000000BB
+            draw_bg: {
+                uniform bg_color: #000000BB
+                fn pixel(self) -> vec4 {
+                    return self.bg_color;
+                }
+            }
         }
 
-        main_content := SolidView {
+        main_content = <FadeView> {
             width: 300,
             height: Fill
             flow: Overlay,
-            align: Align{x: 1.0}
+            align: {x: 1.0}
 
-            show_bg: true,
-            draw_bg.color: (COLOR_PRIMARY)
-
-            user_profile_view := UserProfileView { }
+            user_profile_view = <UserProfileView> { }
 
             // The "X" close button on the top right
-            close_button := RobrixNeutralIconButton {
+            close_button = <RobrixIconButton> {
                 width: Fit,
                 height: Fit,
                 spacing: 0,
                 margin: 7,
                 padding: 15,
-                draw_icon.svg: (ICON_CLOSE)
-                icon_walk: Walk{width: 14, height: 14}
+
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_CLOSE),
+                    fn get_color(self) -> vec4 {
+                        return #x0;
+                    }
+                }
+                icon_walk: {width: 14, height: 14}
             }
         }
 
-        slide: 1.0,
-
-        animator: Animator {
-            panel: {
-                default: @hide
-                show: AnimatorState{
+        animator: {
+            panel = {
+                default: hide,
+                show = {
                     redraw: true,
-                    from: {all: Forward {duration: 0.5}}
-                    ease: Ease.ExpDecay {d1: 0.80, d2: 0.97}
+                    from: {all: Forward {duration: 0.4}}
+                    ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: {
-                        slide: 0.0
+                        main_content = { margin: {right: 0} },
+                        bg_view = {
+                            draw_bg: { bg_color: #000000BB }
+                        }
                     }
                 }
-                hide: AnimatorState{
+                hide = {
                     redraw: true,
                     from: {all: Forward {duration: 0.5}}
-                    ease: Ease.ExpDecay {d1: 0.80, d2: 0.97}
+                    ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: {
-                        slide: 1.0
+                        main_content = { margin: {right: -300} },
+                        bg_view = {
+                            draw_bg: { bg_color: #x00000000 }
+                        }
                     }
                 }
             }
@@ -286,10 +339,9 @@ script_mod! {
 }
 
 
-#[derive(Clone, Default, Debug)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum ShowUserProfileAction {
     ShowUserProfile(UserProfileAndRoomId),
-    #[default]
     None,
 }
 
@@ -347,12 +399,10 @@ impl UserProfilePaneInfo {
     }
 }
 
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct UserProfileSlidingPane {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
-    #[live] slide: f32,
+    #[animator] animator: Animator,
 
     #[rust] info: Option<UserProfilePaneInfo>,
     #[rust] is_animating_out: bool,
@@ -368,17 +418,22 @@ impl Widget for UserProfileSlidingPane {
         if animator_action.must_redraw() {
             self.redraw(cx);
         }
-
-        // If we're animating the pane closed and the animation track has finished
-        // (the Animator removes ended tracks on the same frame it returns the last
-        // Animating action), hide everything and mark the pane as invisible.
-        if self.is_animating_out && !self.animator.is_track_animating(id!(panel)) {
-            self.visible = false;
-            self.is_animating_out = false;
-            cx.revert_key_focus();
-            self.view(cx, ids!(bg_view)).set_visible(cx, false);
-            self.redraw(cx);
-            return;
+        // 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()) {
+                (true, false) => {
+                    self.visible = false;
+                    cx.revert_key_focus();
+                    self.view(ids!(bg_view)).set_visible(cx, false);
+                    self.redraw(cx);
+                    return;
+                }
+                (false, true) => {
+                    self.is_animating_out = true;
+                }
+                _ => { }
+            }
         }
 
         let area = self.view.area();
@@ -392,7 +447,7 @@ impl Widget for UserProfileSlidingPane {
         let close_pane = {
             matches!(
                 event,
-                Event::Actions(actions) if self.button(cx, ids!(close_button)).clicked(actions)
+                Event::Actions(actions) if self.button(ids!(close_button)).clicked(actions)
             )
             || event.back_pressed()
             || match event.hits_with_capture_overload(cx, area, true) {
@@ -403,13 +458,12 @@ impl Widget for UserProfileSlidingPane {
                 }
                 Hit::FingerUp(fue) if fue.is_over => {
                     fue.mouse_button().is_some_and(|b| b.is_back())
-                    || !self.view(cx, ids!(main_content)).area().rect(cx).contains(fue.abs)
+                    || !self.view(ids!(main_content)).area().rect(cx).contains(fue.abs)
                 }
                 _ => false,
             }
         };
         if close_pane {
-            self.is_animating_out = true;
             self.animator_play(cx, ids!(panel.hide));
             self.redraw(cx);
             return;
@@ -463,7 +517,7 @@ impl Widget for UserProfileSlidingPane {
         let Some(info) = self.info.as_ref() else { return };
 
         if let Event::Actions(actions) = event {
-            if self.button(cx, ids!(direct_message_button)).clicked(actions) {
+            if self.button(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.
@@ -471,7 +525,7 @@ impl Widget for UserProfileSlidingPane {
                 });
             }
 
-            if self.button(cx, ids!(copy_link_to_user_button)).clicked(actions) {
+            if self.button(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(
@@ -487,7 +541,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(cx, ids!(ignore_user_button)).clicked(actions) {
+                if self.button(ids!(ignore_user_button)).clicked(actions) {
                     submit_async_request(MatrixRequest::IgnoreUser {
                         ignore: !room_member.is_ignored(),
                         room_id: info.room_id.clone(),
@@ -509,39 +563,21 @@ impl Widget for UserProfileSlidingPane {
             return self.view.draw_walk(cx, scope, walk);
         };
 
-        // Use the `slide` value to position main_content.
-        // slide=0.0 means fully shown; slide=1.0 means fully hidden (off-screen right).
-        let panel_width = 300.0;
-        let right_margin = -(self.slide * panel_width);
-        let mut main_content = self.view(cx, ids!(main_content));
-        script_apply_eval!(cx, main_content, {
-            margin.right: #(right_margin)
-        });
-        // Also derive the bg_view overlay alpha from `slide`.
-        // The animator can only interpolate struct fields, not child view properties,
-        // so we compute the bg color here from the smoothly-animated `slide` value.
-        let bg_alpha = (1.0 - self.slide) * 0.733; // 0.733 ≈ 0xBB/0xFF
-        let bg_color = vec4(0.0, 0.0, 0.0, bg_alpha);
-        let mut bg_view = self.view(cx, ids!(bg_view));
-        script_apply_eval!(cx, bg_view, {
-            draw_bg +: { color: #(bg_color) }
-        });
-
         // Set the user name, using the user ID as a fallback.
-        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());
+        self.label(ids!(user_name)).set_text(cx, info.displayable_name());
+        self.label(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(cx, ids!(avatar));
+        let avatar_ref = self.avatar(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(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());
+        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());
 
         // 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,
@@ -555,9 +591,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(cx, ids!(direct_message_button)).set_visible(cx, !is_pane_showing_current_account);
+        self.button(ids!(direct_message_button)).set_visible(cx, !is_pane_showing_current_account);
 
-        let ignore_user_button = self.button(cx, ids!(ignore_user_button));
+        let ignore_user_button = self.button(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.
@@ -621,7 +657,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(cx, ids!(tsp_verify_user))
+            self.view.tsp_verify_user(ids!(tsp_verify_user))
                 .show(cx, info.user_id.clone());
         }
 
@@ -630,16 +666,15 @@ impl UserProfileSlidingPane {
 
     pub fn show(&mut self, cx: &mut Cx) {
         self.visible = true;
-        self.is_animating_out = false;
         cx.set_key_focus(self.view.area());
         self.animator_play(cx, ids!(panel.show));
-        self.view(cx, ids!(bg_view)).set_visible(cx, true);
+        self.view(ids!(bg_view)).set_visible(cx, true);
 
-        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.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.redraw(cx);
     }
 }
@@ -652,9 +687,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 a669929e8..15de2012c 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 68b20bae9..cc8850257 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::ScriptVm;
+use makepad_widgets::Cx;
 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 script_mod(vm: &mut ScriptVm) {
-    reply_preview::script_mod(vm);
-    room_input_bar::script_mod(vm);
-    typing_notice::script_mod(vm);
+pub fn live_design(cx: &mut Cx) {
+    reply_preview::live_design(cx);
+    room_input_bar::live_design(cx);
+    typing_notice::live_design(cx);
 }
 
 /// Info about a room, either partially or completely known.
diff --git a/src/room/reply_preview.rs b/src/room/reply_preview.rs
index 03ec07948..9a182cd9c 100644
--- a/src/room/reply_preview.rs
+++ b/src/room/reply_preview.rs
@@ -5,118 +5,127 @@
 
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.ReplyPreviewContent = View {
+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> {
         width: Fill
         height: Fit
         flow: Down
-        padding: Inset{left: 16.0, bottom: 5.0, top: 2.0, right: 11.0}
-        cursor: MouseCursor.Hand,
+        padding: {left: 16.0, bottom: 5.0, top: 2.0, right: 11.0}
+        cursor: Hand,
 
-        View {
+        <View> {
             width: Fill
             height: Fit
             flow: Right
-            margin: Inset{ bottom: 10.0, top: 0.0, right: 5.0 }
-            align: Align{y: 0.5}
+            margin: { bottom: 10.0, top: 0.0, right: 5.0 }
+            align: {y: 0.5}
 
-            reply_preview_avatar := Avatar {
+            reply_preview_avatar = <Avatar> {
                 width: 19.,
                 height: 19.,
-                text_view +: {
-                    text +: {
-                        draw_text +: {
-                            text_style: theme.font_regular { font_size: 6.0 }
-                        }
-                    }
-                }
+                text_view = { text = { draw_text: {
+                    text_style: { font_size: 6.0 }
+                }}}
             }
 
-            reply_preview_username := Label {
+            reply_preview_username = <Label> {
                 width: Fill,
                 flow: Right, // do not wrap
-                margin: Inset{ left: 5.0, top: 2 }
-                draw_text +: {
-                    text_style: USERNAME_TEXT_STYLE { font_size: 10 },
+                margin: { left: 5.0, top: 2 }
+                draw_text: {
+                    text_style: <USERNAME_TEXT_STYLE> { font_size: 10 },
                     color: (USERNAME_TEXT_COLOR)
+                    wrap: Ellipsis,
                 }
                 text: "<Username not available>"
             }
         }
 
-        reply_preview_body := HtmlOrPlaintext {
-            margin: Inset{left: 1.5}
-            html_view +: {
-                html +: {
-                    font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE)
-                    text_style_normal +: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
-                    text_style_italic +: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
-                    text_style_bold +: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
-                    text_style_bold_italic +: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
-                    text_style_fixed +: { font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE) }
+        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) },
                 }
-            }
-            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.
-    mod.widgets.ReplyingPreview = View {
+    pub ReplyingPreview = <View> {
         visible: false
         width: Fill
         height: Fit
         flow: Down
-        padding: Inset{ left: 9, right: 9 }
+        padding: { 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: Align{y: 0.5}
-            padding: Inset{left: 14, right: 6, top: 10, bottom: 0}
+            align: {y: 0.5}
+            padding: {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: Inset{top: 5}
+                padding: {top: 5}
 
-                draw_text +: {
-                    text_style: USERNAME_TEXT_STYLE {},
+                draw_text: {
+                    text_style: <USERNAME_TEXT_STYLE> {},
                     color: #222,
+                    wrap: Ellipsis,
                 }
                 text: "Replying to:"
             }
 
-            cancel_reply_button := RobrixNegativeIconButton {
+            cancel_reply_button = <RobrixIconButton> {
                 width: Fit,
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: Inset{left: 5, right: 0},
-                draw_bg.border_radius: 5.0
-                draw_icon.svg: (ICON_CLOSE)
-                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                margin: {left: 5, right: 0},
+
+                draw_bg: {
+                    border_color: (COLOR_FG_DANGER_RED),
+                    color: (COLOR_BG_DANGER_RED)
+                    border_radius: 5
+                }
+                draw_icon: {
+                    svg_file: (ICON_CLOSE),
+                    color: (COLOR_FG_DANGER_RED)
+                }
+                icon_walk: {width: 16, height: 16, margin: 0}
             }
         }
 
-        reply_preview_content := mod.widgets.ReplyPreviewContent { }
+        reply_preview_content = <ReplyPreviewContent> { }
 
-        LineH {
-            margin: Inset{top: 4.0, left: 5, right: 5} //, bottom: 10}
+        <LineH> {
+            margin: {top: 4.0, left: 5, right: 5} //, bottom: 10}
         }
     }
 
@@ -124,25 +133,28 @@ script_mod! {
     // within a room timeline.
     // That is, this view contains a preview of the earlier message
     // that is shown above the "in-reply-to" message.
-    mod.widgets.RepliedToMessage = View {
+    pub RepliedToMessage = <View> {
         visible: false
         width: Fill
         height: Fit
         flow: Down
 
-        padding: Inset{top: 0.0, right: 12.0, bottom: 0.0, left: 12.0}
+        padding: {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 := mod.widgets.ReplyPreviewContent {
+        replied_to_message_content = <ReplyPreviewContent> {
             show_bg: true
-            draw_bg +: {
-                color: instance(COLOR_TRANSPARENT)
-                vertical_bar_color: instance(USERNAME_TEXT_COLOR)
-                vertical_bar_width: instance(2.0)
-                border_radius: instance(0.0)
+            draw_bg: {
+                instance vertical_bar_color: (USERNAME_TEXT_COLOR)
+                instance vertical_bar_width: 2.0
+                instance border_radius: 0.0
+
+                fn get_color(self) -> vec4 {
+                    return self.color;
+                }
 
-                pixel: fn() {
-                    let sdf = Sdf2d.viewport(self.pos * self.rect_size);
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
 
                     sdf.box(
                         0.0,
@@ -151,7 +163,7 @@ script_mod! {
                         self.rect_size.y,
                         max(1.0, self.border_radius)
                     );
-                    sdf.fill(self.color);
+                    sdf.fill(self.get_color());
 
                     sdf.rect(
                         0.0,
diff --git a/src/room/room_input_bar.rs b/src/room/room_input_bar.rs
index 93b8d4a9d..5260f71b7 100644
--- a/src/room/room_input_bar.rs
+++ b/src/room/room_input_bar.rs
@@ -1,6 +1,6 @@
 //! The RoomInputBar widget contains all components related to sending messages/content to a room.
 //!
-//! The RoomInputBar is capped to a maximum height of 75% of the containing RoomScreen's height.
+//! The RoomInputBar is capped to a maximum height of 62.5% of the containing RoomScreen's height.
 //!
 //! The widgets included in the RoomInputBar are:
 //! * a preview of the message the user is replying to.
@@ -20,148 +20,156 @@ use makepad_widgets::*;
 use matrix_sdk::room::reply::{EnforceThread, Reply};
 use matrix_sdk_ui::timeline::{EmbeddedEvent, EventTimelineItem, TimelineEventItemId};
 use ruma::{events::room::message::{LocationMessageEventContent, MessageType, ReplyWithinThread, RoomMessageEventContent}, OwnedRoomId};
-use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt, EditingPaneWidgetRefExt}, location_preview::{LocationPreviewWidgetExt, LocationPreviewWidgetRefExt}, room_screen::{MessageAction, RoomScreenProps, populate_preview_of_timeline_item}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}}, location::init_location_subscriber, shared::{avatar::AvatarWidgetRefExt, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{PopupKind, enqueue_popup_notification}, styles::*}, sliding_sync::{MatrixRequest, TimelineKind, UserPowerLevels, submit_async_request}, utils};
+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};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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;
 
-    mod.widgets.ICO_LOCATION_PERSON = crate_resource("self://resources/icons/location-person.svg")
+    ICO_LOCATION_PERSON = dep("crate://self/resources/icons/location-person.svg")
 
 
-    mod.widgets.RoomInputBar = set_type_default() do #(RoomInputBar::register_widget(vm)) {
-        ..mod.widgets.RoundedView
-
+    pub RoomInputBar = {{RoomInputBar}}<RoundedView> {
         width: Fill,
-        height: Fit{max: FitBound.Rel{base: Base.Full, factor: 0.75}}
+        height: Fit { max: Rel { base: Full, factor: 0.625 } }
         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: Inset{left: -4, right: -4, bottom: -4 }
+        margin: {left: -4, right: -4, bottom: -4 }
 
         show_bg: true,
-        draw_bg +: {
+        draw_bg: {
             color: (COLOR_PRIMARY)
-            border_radius: 5.0
-            border_color: (COLOR_SECONDARY)
+            border_radius: 5.0,
+            border_color: (COLOR_SECONDARY),
             border_size: 2.0
-            // shadow_color: #0006
-            // shadow_radius: 0.0
+            // uniform shadow_color: #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: FitBound.Rel{base: Base.Full, factor: 0.75}}
+            height: Fit { max: Rel { base: Full, factor: 0.625 } }
             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: FitBound.Rel{base: Base.Full, factor: 0.75}}
+                height: Fit { max: Rel { base: Full, factor: 0.625 } }
                 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: Align{y: 1.0},
+                align: {y: 1.0},
                 padding: 6,
 
-                location_button := RobrixIconButton {
-                    margin: 4
+                location_button = <RobrixIconButton> {
+                    margin: {left: 4}
                     spacing: 0,
-                    draw_icon +: {
-                        svg: (mod.widgets.ICO_LOCATION_PERSON)
+                    draw_icon: {
+                        svg_file: (ICO_LOCATION_PERSON)
                         color: (COLOR_ACTIVE_PRIMARY_DARKER)
                     },
-                    draw_bg +: {
-                        color: (COLOR_BG_PREVIEW)
-                        color_hover: #E0E8F0
-                        color_down: #D0D8E8
+                    draw_bg: {
+                        color: (COLOR_BG_PREVIEW),
                     }
-                    icon_walk: Walk{width: 23, height: 23, margin: Inset{bottom: -1}}
+                    icon_walk: {width: Fit, height: 23, margin: {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: Inset{bottom: 9, left: 6, right: 0}
+                tsp_sign_checkbox = <TspSignAnycastCheckbox> {
+                    margin: {bottom: 9, left: 6, right: 0}
                 }
 
-                mentionable_text_input := MentionableTextInput {
+                mentionable_text_input = <MentionableTextInput> {
                     width: Fill,
-                    height: Fit{max: FitBound.Rel{base: Base.Full, factor: 0.75}}
-                    margin: Inset {
-                        top: 3, // add some space between the top border of the text input and the top border of the room input bar
-                        bottom: 5.75, // to line up the middle of the text input with the middle of the buttons
-                        left: 3, right: 3 // to give a bit of breathing room between the text input and the buttons on the sides
-                    },
+                    height: Fit { max: Rel { base: Full, factor: 0.625 } }
+                    margin: { top: 5, bottom: 12, left: 1, right: 1 },
 
-                    persistent +: {
-                        center +: {
-                            text_input := RobrixTextInput {
+                    persistent = {
+                        center = {
+                            text_input = {
                                 empty_text: "Write a message (in Markdown) ..."
                             }
                         }
                     }
                 }
 
-                send_message_button := RobrixPositiveIconButton {
+                send_message_button = <RobrixIconButton> {
                     // Disabled by default; enabled when text is inputted
                     enabled: false,
                     spacing: 0,
-                    text: "",
-                    margin: 4
-                    draw_icon +: { svg: (ICON_SEND) }
-                    icon_walk: Walk{width: 21, height: 21},
+                    margin: {right: 4}
+                    draw_icon: {
+                        svg_file: (ICON_SEND),
+                        color: (COLOR_FG_DISABLED),
+                    }
+                    icon_walk: {width: Fit, height: 21},
+                    draw_bg: {
+                        color: (COLOR_BG_DISABLED),
+                    }
                 }
             }
 
-            can_not_send_message_notice := SolidView {
+            can_not_send_message_notice = <View> {
                 visible: false
-                padding: Inset{left: 50, right: 50, top: 20, bottom: 20}
-                align: Align{y: 0.5}
-                width: Fill, height: Fit
-
                 show_bg: true
-                draw_bg.color: (COLOR_SECONDARY)
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                padding: {left: 50, right: 50, top: 20, bottom: 20}
+                align: {y: 0.5}
+                width: Fill, height: Fit
 
-                text := Label {
+                text = <Label> {
                     width: Fill,
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
+                    draw_text: {
                         color: (COLOR_TEXT)
-                        text_style: theme.font_italic {font_size: 12.2}
+                        text_style: <THEME_FONT_ITALIC>{font_size: 12.2}
+                        wrap: Word,
                     }
                     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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct RoomInputBar {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 
     /// Whether the `ReplyingPreview` was visible when the `EditingPane` was shown.
@@ -178,14 +186,15 @@ impl Widget for RoomInputBar {
             .get::<RoomScreenProps>()
             .expect("BUG: RoomScreenProps should be available in Scope::props for RoomInputBar");
 
-        match event.hits(cx, self.view.view(cx, ids!(replying_preview.reply_preview_content)).area()) {
+        match event.hits(cx, self.view.view(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, 
+                        room_screen_props.room_screen_widget_uid,
+                        &scope.path,
                         MessageAction::JumpToEvent(event_id),
                     );
                 } else {
@@ -218,12 +227,12 @@ impl RoomInputBar {
         actions: &Actions,
         room_screen_props: &RoomScreenProps,
     ) {
-        let mentionable_text_input = self.mentionable_text_input(cx, ids!(mentionable_text_input));
+        let mentionable_text_input = self.mentionable_text_input(ids!(mentionable_text_input));
         let text_input = mentionable_text_input.text_input_ref();
 
         // 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(cx, ids!(cancel_reply_button)).clicked(actions)
+        if self.button(ids!(cancel_reply_button)).clicked(actions)
             || text_input.escaped(actions)
         {
             self.clear_replying_to(cx);
@@ -231,7 +240,7 @@ impl RoomInputBar {
         }
 
         // Handle the add location button being clicked.
-        if self.button(cx, ids!(location_button)).clicked(actions) {
+        if self.button(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");
@@ -241,13 +250,13 @@ impl RoomInputBar {
                     None,
                 );
             }
-            self.view.location_preview(cx, ids!(location_preview)).show();
+            self.view.location_preview(ids!(location_preview)).show();
             self.redraw(cx);
         }
 
         // Handle the send location button being clicked.
-        if self.button(cx, ids!(location_preview.send_location_button)).clicked(actions) {
-            let location_preview = self.location_preview(cx, ids!(location_preview));
+        if self.button(ids!(location_preview.send_location_button)).clicked(actions) {
+            let location_preview = self.location_preview(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(
@@ -290,7 +299,7 @@ impl RoomInputBar {
         }
 
         // Handle the send message button being clicked or Cmd/Ctrl + Return being pressed.
-        if self.button(cx, ids!(send_message_button)).clicked(actions)
+        if self.button(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();
@@ -353,14 +362,15 @@ impl RoomInputBar {
                 ..
             }) = text_input.key_down_unhandled(actions) {
                 cx.widget_action(
-                    room_screen_props.room_screen_widget_uid, 
+                    room_screen_props.room_screen_widget_uid,
+                    &HeapLiveIdPath::default(),
                     MessageAction::EditLatest,
                 );
             }
         }
 
         // If the EditingPane has been hidden, handle that.
-        if self.view.editing_pane(cx, ids!(editing_pane)).was_hidden(actions) {
+        if self.view.editing_pane(ids!(editing_pane)).was_hidden(actions) {
             self.on_editing_pane_hidden(cx);
         }
     }
@@ -379,9 +389,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(cx, ids!(replying_preview));
+        let replying_preview = self.view(ids!(replying_preview));
         let (replying_preview_username, _) = replying_preview
-            .avatar(cx, ids!(reply_preview_content.reply_preview_avatar))
+            .avatar(ids!(reply_preview_content.reply_preview_avatar))
             .set_avatar_and_get_username(
                 cx,
                 timeline_kind,
@@ -392,12 +402,12 @@ impl RoomInputBar {
             );
 
         replying_preview
-            .label(cx, ids!(reply_preview_content.reply_preview_username))
+            .label(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(cx, ids!(reply_preview_content.reply_preview_body)),
+            &replying_preview.html_or_plaintext(ids!(reply_preview_content.reply_preview_body)),
             replying_to.0.content(),
             replying_to.0.sender(),
             &replying_preview_username,
@@ -408,22 +418,21 @@ 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(cx, ids!(editing_pane)).force_reset_hide(cx);
+        self.editing_pane(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(cx, ids!(input_bar.mentionable_text_input.text_input)).set_key_focus(cx);
+            self.text_input(ids!(input_bar.mentionable_text_input.text_input)).set_key_focus(cx);
         }
-        self.button(cx, ids!(cancel_reply_button)).reset_hover(cx);
         self.redraw(cx);
     }
 
     /// 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(cx, ids!(replying_preview)).set_visible(cx, false);
+        self.view(ids!(replying_preview)).set_visible(cx, false);
         self.replying_to = None;
     }
 
@@ -436,17 +445,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(cx, ids!(input_bar)).set_visible(cx, false);
+        self.view.view(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(cx, ids!(replying_preview));
+        let replying_preview = self.view.view(ids!(replying_preview));
         self.was_replying_preview_visible = replying_preview.visible();
         replying_preview.set_visible(cx, false);
-        self.view.location_preview(cx, ids!(location_preview)).clear();
+        self.view.location_preview(ids!(location_preview)).clear();
 
-        let editing_pane = self.view.editing_pane(cx, ids!(editing_pane));
+        let editing_pane = self.view.editing_pane(ids!(editing_pane));
         match behavior {
             ShowEditingPaneBehavior::ShowNew { event_tl_item } => {
                 editing_pane.show(cx, event_tl_item, timeline_kind);
@@ -464,9 +473,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(cx, ids!(input_bar)).set_visible(cx, true);
+        self.view.view(ids!(input_bar)).set_visible(cx, true);
         if self.was_replying_preview_visible && self.replying_to.is_some() {
-            self.view.view(cx, ids!(replying_preview)).set_visible(cx, true);
+            self.view.view(ids!(replying_preview)).set_visible(cx, true);
         }
         self.redraw(cx);
         // We don't need to do anything with the editing pane itself here,
@@ -481,15 +490,15 @@ impl RoomInputBar {
         tombstoned_room_id: &OwnedRoomId,
         successor_room_details: Option<&SuccessorRoomDetails>,
     ) {
-        let tombstone_footer = self.tombstone_footer(cx, ids!(tombstone_footer));
-        let input_bar = self.view(cx, ids!(input_bar));
+        let tombstone_footer = self.tombstone_footer(ids!(tombstone_footer));
+        let input_bar = self.view(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(cx, ids!(editing_pane)).is_currently_shown(cx) {
+            if !self.editing_pane(ids!(editing_pane)).is_currently_shown(cx) {
                 input_bar.set_visible(cx, true);
             }
         }
@@ -499,16 +508,21 @@ 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 mut send_message_button = self.view.button(cx, ids!(send_message_button));
+        let send_message_button = self.view.button(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)
         };
-        script_apply_eval!(cx, send_message_button, {
-            enabled: #(enable),
-            draw_icon.color: #(fg_color),
-            draw_bg.color: #(bg_color),
+        send_message_button.apply_over(cx, live! {
+            enabled: (enable),
+            draw_icon: {
+                color: (fg_color),
+                // color_hover: (fg_color),
+            }
+            draw_bg: {
+                color: (bg_color),
+            }
         });
     }
 
@@ -521,8 +535,8 @@ impl RoomInputBar {
         user_power_levels: UserPowerLevels,
     ) {
         let can_send = user_power_levels.can_send_message();
-        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);
+        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);
     }
 
     /// Returns true if the TSP signing checkbox is checked, false otherwise.
@@ -530,7 +544,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(cx, ids!(tsp_sign_checkbox)).active(cx)
+        self.view.check_box(ids!(tsp_sign_checkbox)).active(cx)
     }
 }
 
@@ -594,7 +608,7 @@ impl RoomInputBarRef {
         edit_result: Result<(), matrix_sdk_ui::timeline::Error>,
     ) {
         let Some(inner) = self.borrow_mut() else { return };
-        inner.editing_pane(cx, ids!(editing_pane))
+        inner.editing_pane(ids!(editing_pane))
             .handle_edit_result(cx, timeline_event_item_id, edit_result);
     }
 
@@ -603,12 +617,12 @@ impl RoomInputBarRef {
         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.child_by_path(ids!(location_preview)).as_location_preview().clear();
+        inner.location_preview(ids!(location_preview)).clear();
         RoomInputBarState {
             was_replying_preview_visible: inner.was_replying_preview_visible,
             replying_to: inner.replying_to.clone(),
-            editing_pane_state: inner.child_by_path(ids!(editing_pane)).as_editing_pane().save_state(),
-            text_input_state: inner.child_by_path(ids!(input_bar.mentionable_text_input.text_input)).as_text_input().save_state(),
+            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(),
         }
     }
 
@@ -637,7 +651,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(cx, ids!(input_bar.mentionable_text_input.text_input))
+        inner.text_input(ids!(input_bar.mentionable_text_input.text_input))
             .restore_state(cx, text_input_state);
 
         // 2. Restore the state of the replying-to preview.
@@ -656,7 +670,7 @@ impl RoomInputBarRef {
                 timeline_kind.clone(),
             );
         } else {
-            inner.editing_pane(cx, ids!(editing_pane)).force_reset_hide(cx);
+            inner.editing_pane(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 55fad31bd..695f5bbef 100644
--- a/src/room/typing_notice.rs
+++ b/src/room/typing_notice.rs
@@ -4,54 +4,58 @@ use makepad_widgets::*;
 
 use crate::shared::bouncing_dots::BouncingDotsWidgetExt;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::bouncing_dots::BouncingDots;
 
-    mod.widgets.TYPING_NOTICE_ANIMATION_DURATION_SECS = 0.3
-
-    mod.widgets.TypingNotice = set_type_default() do #(TypingNotice::register_widget(vm)) {
-        ..mod.widgets.SolidView
+    TYPING_NOTICE_ANIMATION_DURATION_SECS = 0.3
 
+    pub TypingNotice = {{TypingNotice}} {
         visible: false
         width: Fill
         height: 30
         flow: Right
-        padding: Inset{left: 12.0, top: 8.0, bottom: 8.0, right: 10.0}
-
-        show_bg: true
-        draw_bg +: {
-            color: #e8f4ff
+        padding: {left: 12.0, top: 8.0, bottom: 8.0, right: 10.0}
+        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 +: {
+        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: {
                 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: Inset{top: 1.1, left: -4 }
+        bouncing_dots = <BouncingDots> {
+            margin: {top: 1.1, left: -4 }
             padding: 0.0,
-            draw_bg.color: (TYPING_NOTICE_TEXT_COLOR)
+            draw_bg: {
+                color: (TYPING_NOTICE_TEXT_COLOR),
+            }
         }
 
-        animator: Animator{
-            typing_notice_animator: {
-                default: @show
-                show: AnimatorState{
+
+        animator: {
+            typing_notice_animator = {
+                default: show,
+                show = {
                     redraw: true,
-                    from: { all: Forward { duration: (mod.widgets.TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
                     apply: { height: 30 }
                 }
-                hide: AnimatorState{
+                hide = {
                     redraw: true,
-                    from: { all: Forward { duration: (mod.widgets.TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (TYPING_NOTICE_ANIMATION_DURATION_SECS) } }
                     apply: { height: 0 }
                 }
             }
@@ -60,11 +64,10 @@ script_mod! {
 }
 
 /// A notice that slides into view when someone is typing.
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TypingNotice {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
 }
 
 impl Widget for TypingNotice {
@@ -87,7 +90,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(cx, ids!(bouncing_dots)).stop_animation(cx);
+                self.view.bouncing_dots(ids!(bouncing_dots)).stop_animation(cx);
                 return;
             }
             [user] => format!("{user} is typing "),
@@ -104,12 +107,12 @@ impl TypingNotice {
             }
         };
         // Set the typing notice text and make its view visible.
-        self.view.label(cx, ids!(typing_label)).set_text(cx, &typing_notice_text);
+        self.view.label(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(cx, ids!(bouncing_dots)).start_animation(cx);
+        self.view.bouncing_dots(ids!(bouncing_dots)).start_animation(cx);
     }
 }
 
diff --git a/src/settings/account_settings.rs b/src/settings/account_settings.rs
index 877f66bfc..814f585e9 100644
--- a/src/settings/account_settings.rs
+++ b/src/settings/account_settings.rs
@@ -2,202 +2,275 @@ use std::cell::RefCell;
 
 use makepad_widgets::{text::selection::Cursor, *};
 
-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};
+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};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::*;
 
     // The view containing all user account-related settings.
-    mod.widgets.AccountSettings = #(AccountSettings::register_widget(vm)) {
+    pub AccountSettings = {{AccountSettings}} {
         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: Align{y: 0.5}.
+            //       support RightWrap with align: {y: 0.5}.
             flow: Right,
-            align: Align{y: 0.5}
+            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: theme.font_regular { font_size: 35.0 }
-                        }
-                    }
-                }
+                text_view = { text = { draw_text: {
+                    text_style: { font_size: 35.0 }
+                }}}
             }
 
-            View {
+            <View> {
                 width: Fit, height: Fit
                 flow: Down,
-                align: Align{y: 0.5}
-                padding: Inset{ left: 10, right: 10 }
+                align: {y: 0.5}
+                padding: { left: 10, right: 10 }
                 spacing: 10
 
-                View {
+                <View> {
                     width: Fit, height: Fit
                     flow: Right,
-                    align: Align{y: 0.5}
+                    align: {y: 0.5}
                     spacing: 10
 
-                    upload_avatar_button := RobrixIconButton {
+                    upload_avatar_button = <RobrixIconButton> {
                         width: 140,
-                        padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                        padding: {top: 10, bottom: 10, left: 12, right: 15}
                         margin: 0,
-                        draw_icon.svg: (ICON_UPLOAD)
-                        icon_walk: Walk{width: 16, height: 16}
+                        draw_bg: {
+                            color: (COLOR_ACTIVE_PRIMARY)
+                        }
+                        draw_icon: {
+                            svg_file: (ICON_UPLOAD)
+                            color: (COLOR_PRIMARY)
+                        }
+                        draw_text: {
+                            color: (COLOR_PRIMARY)
+                            text_style: <REGULAR_TEXT> {}
+                        }
+                        icon_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: (COLOR_ACTIVE_PRIMARY)
+                        }
                     }
                 }
 
-                View {
+                <View> {
                     width: Fit, height: Fit
                     flow: Right,
-                    align: Align{y: 0.5}
+                    align: {y: 0.5}
                     spacing: 10
 
-                    delete_avatar_button := RobrixNegativeIconButton {
+                    delete_avatar_button = <RobrixIconButton> {
                         width: 140,
-                        padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
+                        padding: {top: 10, bottom: 10, left: 12, right: 15}
                         margin: 0,
-                        draw_icon.svg: (ICON_TRASH)
-                        icon_walk: Walk{ width: 16, height: 16 }
+                        draw_bg: {
+                            color: (COLOR_BG_DANGER_RED)
+                            border_color: (COLOR_FG_DANGER_RED)
+                        }
+                        draw_icon: {
+                            svg_file: (ICON_TRASH),
+                            color: (COLOR_FG_DANGER_RED),
+                        }
+                        draw_text: {
+                            color: (COLOR_FG_DANGER_RED),
+                        }
+                        icon_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: (COLOR_ACTIVE_PRIMARY)
+                        }
                     }
                 }
             }
         }
 
-        SubsectionLabel {
+        <SubsectionLabel> {
             text: "Your Display Name:"
         }
 
-        display_name_input := RobrixTextInput {
-            margin: Inset{top: 3, left: 5, right: 5, bottom: 8},
+        display_name_input = <SimpleTextInput> {
+            margin: {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: Flow.Right{wrap: true},
-            align: Align{y: 0.5},
+            flow: RightWrap,
+            align: {y: 0.5},
             spacing: 10
 
             // These buttons are disabled by default, and enabled when the user
             // changes the `display_name_input` text.
-            // These buttons start disabled; Rust code enables them and swaps
-            // their styles to RobrixNeutralIconButton / RobrixPositiveIconButton.
-            cancel_display_name_button := RobrixNeutralIconButton {
+            cancel_display_name_button = <RobrixIconButton> {
                 enabled: false,
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: Inset{left: 5},
-                draw_icon.svg: (ICON_FORBIDDEN)
-                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                margin: {left: 5},
+
+                draw_bg: {
+                    color: (COLOR_BG_DISABLED)
+                }
+                draw_icon: {
+                    svg_file: (ICON_FORBIDDEN),
+                    color: (COLOR_FG_DISABLED)
+                }
+                icon_walk: {width: 16, height: 16, margin: 0}
+                draw_text: {
+                    color: (COLOR_FG_DISABLED),
+                }
                 text: "Cancel"
             }
 
-            accept_display_name_button := RobrixPositiveIconButton {
+            accept_display_name_button = <RobrixIconButton> {
                 enabled: false,
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: Inset{left: 5},
-                draw_bg.border_radius: 5.0
-                draw_icon.svg: (ICON_CHECKMARK)
-                icon_walk: Walk{width: 16, height: 16, margin: 0}
+                margin: {left: 5},
+
+                draw_bg: {
+                    border_color: (COLOR_FG_DISABLED),
+                    color: (COLOR_BG_DISABLED),
+                    border_radius: 5
+                }
+                draw_icon: {
+                    svg_file: (ICON_CHECKMARK)
+                    color: (COLOR_FG_DISABLED),
+                }
+                icon_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: Inset{left: 5, top: 13} // vertically center with buttons
+                margin: {left: 5, top: 13} // vertically center with buttons
                 visible: false
-                draw_bg.color: (COLOR_ACTIVE_PRIMARY)
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
             }
         }
 
-        SubsectionLabel {
+        <SubsectionLabel> {
             text: "Your User ID:"
         }
 
-        View {
+        <View> {
             width: Fill, height: Fit
             flow: Right,
             spacing: 10
 
-            copy_user_id_button := RobrixNeutralIconButton {
+            copy_user_id_button = <RobrixIconButton> {
                 enable_long_press: true,
-                margin: Inset{left: 5}
+                margin: {left: 5}
                 padding: 12,
                 spacing: 0,
-                draw_icon.svg: (ICON_COPY)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{right: -2} }
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_COPY)
+                }
+                icon_walk: {width: 16, height: 16, margin: {right: -2} }
             }
 
-            user_id := Label {
+            user_id = <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true},
-                margin: Inset{top: 10}
-                draw_text +: {
+                flow: RightWrap,
+                margin: {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: Inset{top: 20},
+        <View> {
+            // margin: {top: 20},
             width: Fill, height: Fit
-            flow: Flow.Right{wrap: true},
-            align: Align{y: 0.5},
+            flow: RightWrap,
+            align: {y: 0.5},
             spacing: 10
 
-            manage_account_button := RobrixIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                margin: Inset{left: 5}
-                draw_icon.svg: (ICON_EXTERNAL_LINK)
-                icon_walk: Walk{width: 16, height: 16}
+            manage_account_button = <RobrixIconButton> {
+
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
+                margin: {left: 5}
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_EXTERNAL_LINK)
+                    color: (COLOR_PRIMARY)
+                }
+                draw_text: {
+                    color: (COLOR_PRIMARY)
+                    text_style: <REGULAR_TEXT> {}
+                }
+                icon_walk: {width: 16, height: 16}
                 text: "Manage Account"
             }
 
-            logout_button := RobrixNegativeIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                margin: Inset{left: 5}
-                draw_icon.svg: (ICON_LOGOUT)
-                icon_walk: Walk{ width: 16, height: 16, margin: Inset{right: -2} }
+            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)
+                }
+                draw_icon: {
+                    svg_file: (ICON_LOGOUT),
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                draw_text: {
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                icon_walk: { width: 16, height: 16, margin: {right: -2} }
                 text: "Log out"
             }
         }
@@ -205,7 +278,7 @@ script_mod! {
 }
 
 /// The view containing all user account-related settings.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct AccountSettings {
     #[deref] view: View,
 
@@ -216,12 +289,13 @@ 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(cx, ids!(copy_user_id_button));
+        let copy_user_id_button = self.view.button(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(), 
+                    copy_user_id_button.widget_uid(),
+                    &scope.path,
                     TooltipAction::HoverIn {
                         text: "Copy User ID".to_string(),
                         widget_rect: copy_user_id_button_area.rect(cx),
@@ -234,7 +308,8 @@ impl Widget for AccountSettings {
             }
             Hit::FingerHoverOut(_) => {
                 cx.widget_action(
-                    copy_user_id_button.widget_uid(), 
+                    copy_user_id_button.widget_uid(),
+                    &scope.path,
                     TooltipAction::HoverOut,
                 );
             }
@@ -262,16 +337,16 @@ impl MatchEvent for AccountSettings {
     }
 
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        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));
+        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));
 
         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(cx, ids!(logout_button));
+                let logout_button = self.view.button(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);
@@ -283,8 +358,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(cx, ids!(upload_avatar_spinner)).set_visible(cx, false);
-                    self.view.widget(cx, ids!(delete_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(ids!(upload_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(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());
@@ -299,8 +374,8 @@ impl MatchEvent for AccountSettings {
                     continue;
                 }
                 Some(AccountDataAction::AvatarChangeFailed(err_msg)) => {
-                    self.view.widget(cx, ids!(upload_avatar_spinner)).set_visible(cx, false);
-                    self.view.widget(cx, ids!(delete_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(ids!(upload_avatar_spinner)).set_visible(cx, false);
+                    self.view.widget(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(
@@ -316,7 +391,7 @@ impl MatchEvent for AccountSettings {
                     continue;
                 }
                 Some(AccountDataAction::DisplayNameChanged(new_name)) => {
-                    self.view.widget(cx, ids!(save_name_spinner)).set_visible(cx, false);
+                    self.view.widget(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();
@@ -336,7 +411,7 @@ impl MatchEvent for AccountSettings {
                     continue;
                 }
                 Some(AccountDataAction::DisplayNameChangeFailed(err_msg)) => {
-                    self.view.widget(cx, ids!(save_name_spinner)).set_visible(cx, false);
+                    self.view.widget(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);
@@ -353,13 +428,13 @@ impl MatchEvent for AccountSettings {
 
             match action.downcast_ref() {
                 Some(AccountSettingsAction::AvatarDeleteStarted) => {
-                    self.view.widget(cx, ids!(delete_avatar_spinner)).set_visible(cx, true);
+                    self.view.widget(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(cx, ids!(upload_avatar_spinner)).set_visible(cx, true);
+                    self.view.widget(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;
@@ -426,7 +501,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(cx, ids!(save_name_spinner)).set_visible(cx, true);
+            self.view.widget(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);
@@ -437,7 +512,7 @@ impl MatchEvent for AccountSettings {
             );
         }
 
-        if self.view.button(cx, ids!(copy_user_id_button)).clicked(actions) {
+        if self.view.button(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.",
@@ -446,7 +521,7 @@ impl MatchEvent for AccountSettings {
             );
         }
 
-        if self.view.button(cx, ids!(manage_account_button)).clicked(actions) {
+        if self.view.button(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(
@@ -456,7 +531,7 @@ impl MatchEvent for AccountSettings {
             );
         }
 
-        if self.view.button(cx, ids!(logout_button)).clicked(actions) {
+        if self.view.button(ids!(logout_button)).clicked(actions) {
             cx.action(LogoutConfirmModalAction::Open);
         }
     }
@@ -472,7 +547,7 @@ impl AccountSettings {
             return;
         };
 
-        let our_own_avatar = self.view.avatar(cx, ids!(our_own_avatar));
+        let our_own_avatar = self.view.avatar(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(
@@ -493,38 +568,38 @@ impl AccountSettings {
         Self::enable_upload_avatar_button(
             cx,
             true,
-            &self.view.button(cx, ids!(upload_avatar_button))
+            &self.view.button(ids!(upload_avatar_button))
         );
         Self::enable_delete_avatar_button(
             cx,
             own_profile.avatar_state.has_avatar(),
-            &self.view.button(cx, ids!(delete_avatar_button))
+            &self.view.button(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(cx, ids!(user_id))
+        self.view.label(ids!(user_id))
             .set_text(cx, own_profile.user_id.as_str());
-        self.view.text_input(cx, ids!(display_name_input))
+        self.view.text_input(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(cx, ids!(accept_display_name_button)),
-            &self.view.button(cx, ids!(cancel_display_name_button)),
+            &self.view.button(ids!(accept_display_name_button)),
+            &self.view.button(ids!(cancel_display_name_button)),
         );
 
         self.own_profile = Some(own_profile);
         self.populate_avatar_views(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.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.redraw(cx);
     }
 
@@ -539,18 +614,17 @@ impl AccountSettings {
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
         };
-        let mut delete_avatar_button = delete_avatar_button.clone();
-        script_apply_eval!(cx, delete_avatar_button, {
-            enabled: #(enable),
-            draw_bg +: {
-                color: #(delete_button_bg_color),
-                border_color: #(delete_button_fg_color),
+        delete_avatar_button.apply_over(cx, live!{
+            enabled: (enable),
+            draw_bg: {
+                color: (delete_button_bg_color),
+                border_color: (delete_button_fg_color),
             }
-            draw_icon +: {
-                color: #(delete_button_fg_color),
+            draw_icon: {
+                color: (delete_button_fg_color),
             }
-            draw_text +: {
-                color: #(delete_button_fg_color),
+            draw_text: {
+                color: (delete_button_fg_color),
             }
         });
     }
@@ -566,18 +640,17 @@ impl AccountSettings {
         } else {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
         };
-        let mut upload_avatar_button = upload_avatar_button.clone();
-        script_apply_eval!(cx, upload_avatar_button, {
-            enabled: #(enable),
-            draw_bg +: {
-                color: #(upload_button_bg_color),
-                border_color: #(upload_button_fg_color),
+        upload_avatar_button.apply_over(cx, live!{
+            enabled: (enable),
+            draw_bg: {
+                color: (upload_button_bg_color),
+                border_color: (upload_button_fg_color),
             }
-            draw_icon +: {
-                color: #(upload_button_fg_color),
+            draw_icon: {
+                color: (upload_button_fg_color),
             }
-            draw_text +: {
-                color: #(upload_button_fg_color),
+            draw_text: {
+                color: (upload_button_fg_color),
             }
         });
     }
@@ -600,34 +673,32 @@ impl AccountSettings {
             (COLOR_FG_DISABLED, COLOR_BG_DISABLED)
         };
 
-        let mut accept_display_name_button = accept_display_name_button.clone();
-        script_apply_eval!(cx, accept_display_name_button, {
-            enabled: #(enable),
-            draw_bg +: {
-                color: #(accept_button_bg_color),
-                border_color: #(accept_button_fg_color),
+        accept_display_name_button.apply_over(cx, live!(
+            enabled: (enable),
+            draw_bg: {
+                color: (accept_button_bg_color),
+                border_color: (accept_button_fg_color),
             },
-            draw_text +: {
-                color: #(accept_button_fg_color),
+            draw_text: {
+                color: (accept_button_fg_color),
             },
-            draw_icon +: {
-                color: #(accept_button_fg_color),
+            draw_icon: {
+                color: (accept_button_fg_color),
             }
-        });
-        let mut cancel_display_name_button = cancel_display_name_button.clone();
-        script_apply_eval!(cx, cancel_display_name_button, {
-            enabled: #(enable),
-            draw_bg +: {
-                color: #(cancel_button_bg_color),
-                border_color: #(cancel_button_fg_color),
+        ));
+        cancel_display_name_button.apply_over(cx, live!(
+            enabled: (enable),
+            draw_bg: {
+                color: (cancel_button_bg_color),
+                border_color: (cancel_button_fg_color),
             },
-            draw_text +: {
-                color: #(cancel_button_fg_color),
+            draw_text: {
+                color: (cancel_button_fg_color),
             },
-            draw_icon +: {
-                color: #(cancel_button_fg_color),
+            draw_icon: {
+                color: (cancel_button_fg_color),
             }
-        });
+        ));
     }
 }
 
diff --git a/src/settings/mod.rs b/src/settings/mod.rs
index 579bf0849..0c0361d74 100644
--- a/src/settings/mod.rs
+++ b/src/settings/mod.rs
@@ -1,9 +1,9 @@
-use makepad_widgets::ScriptVm;
+use makepad_widgets::Cx;
 
 pub mod settings_screen;
 pub mod account_settings;
 
-pub fn script_mod(vm: &mut ScriptVm) {
-    account_settings::script_mod(vm);
-    settings_screen::script_mod(vm);
+pub fn live_design(cx: &mut Cx) {
+    account_settings::live_design(cx);
+    settings_screen::live_design(cx);
 }
diff --git a/src/settings/settings_screen.rs b/src/settings/settings_screen.rs
index 24baf849d..438f16125 100644
--- a/src/settings/settings_screen.rs
+++ b/src/settings/settings_screen.rs
@@ -3,65 +3,82 @@ use makepad_widgets::*;
 
 use crate::{home::navigation_tab_bar::{NavigationBarAction, get_own_profile}, profile::user_profile::UserProfile, settings::account_settings::AccountSettingsWidgetExt};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
+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;
 
     // The main, top-level settings screen widget.
-    mod.widgets.SettingsScreen = #(SettingsScreen::register_widget(vm)) {
+    pub SettingsScreen = {{SettingsScreen}} {
         width: Fill, height: Fill,
         flow: Overlay
 
-        View {
-            padding: Inset{top: 5, left: 15, right: 15, bottom: 0},
+        <View> {
+            padding: {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: Align{x: 1.0, y: 0.5},
+                align: {x: 1.0, y: 0.5},
                 width: Fill, height: Fit
-                margin: Inset{left: 5, right: 5}
+                margin: {left: 5, right: 5}
                 spacing: 10,
 
-                settings_header_title := TitleLabel {
-                    margin: Inset{top: 4} // line up with the close button
+                settings_header_title = <TitleLabel> {
+                    margin: {top: 4} // line up with the close button
                     text: "All Settings"
-                    draw_text +: {
-                        text_style: theme.font_regular {font_size: 18},
+                    draw_text: {
+                        text_style: {font_size: 18},
                     }
                 }
 
                 // The "X" close button on the top right
-                close_button := RobrixNeutralIconButton {
+                close_button = <RobrixIconButton> {
                     width: Fit,
                     height: Fit,
-                    align: Align{x: 1.0, y: 0.0},
+                    align: {x: 1.0, y: 0.0},
                     spacing: 0,
-                    margin: Inset{top: 4.5} // vertically align with the title
+                    margin: {top: 4.5} // vertically align with the title
                     padding: 15,
-                    draw_icon.svg: (ICON_CLOSE)
-                    icon_walk: Walk{width: 14, height: 14}
+
+                    draw_bg: {
+                        color: (COLOR_SECONDARY)
+                    }
+                    draw_icon: {
+                        svg_file: (ICON_CLOSE),
+                        fn get_color(self) -> vec4 {
+                            return #x0;
+                        }
+                    }
+                    icon_walk: {width: 14, height: 14}
                 }
             }
 
             // Make sure the dividing line is aligned with the close_button
-            LineH { padding: 10, margin: Inset{top: 10, right: 2} }
+            <LineH> { padding: 10, margin: {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: Inset{top: 20, bottom: 5} }
+                <LineH> { width: 400, padding: 10, margin: {top: 20, bottom: 5} }
 
                 // The TSP wallet settings section.
-                tsp_settings_screen := TspSettingsScreen {}
+                tsp_settings_screen = <TspSettingsScreen> {}
 
-                LineH { width: 400, padding: 10, margin: Inset{top: 20, bottom: 5} }
+                <LineH> { width: 400, padding: 10, margin: {top: 20, bottom: 5} }
 
                 // Add other settings sections here as needed.
                 // Don't forget to add a `show()` fn to those settings sections
@@ -70,15 +87,15 @@ script_mod! {
         }
 
         // 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> {}
             }
         }
     }
@@ -86,7 +103,7 @@ script_mod! {
 
 
 /// The top-level widget showing all app and user settings/preferences.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct SettingsScreen {
     #[deref] view: View,
 }
@@ -104,7 +121,7 @@ impl Widget for SettingsScreen {
         let close_pane = {
             matches!(
                 event,
-                Event::Actions(actions) if self.button(cx, ids!(close_button)).clicked(actions)
+                Event::Actions(actions) if self.button(ids!(close_button)).clicked(actions)
             )
             || event.back_pressed()
             || match event.hits(cx, area) {
@@ -132,11 +149,11 @@ impl Widget for SettingsScreen {
                 match action.downcast_ref() {
                     Some(CreateWalletModalAction::Open) => {
                         use crate::tsp::create_wallet_modal::CreateWalletModalWidgetExt;
-                        self.view.create_wallet_modal(cx, ids!(create_wallet_modal_inner)).show(cx);
-                        self.view.modal(cx, ids!(create_wallet_modal)).open(cx);
+                        self.view.create_wallet_modal(ids!(create_wallet_modal_inner)).show(cx);
+                        self.view.modal(ids!(create_wallet_modal)).open(cx);
                     }
                     Some(CreateWalletModalAction::Close) => {
-                        self.view.modal(cx, ids!(create_wallet_modal)).close(cx);
+                        self.view.modal(ids!(create_wallet_modal)).close(cx);
                     }
                     None => { }
                 }
@@ -145,11 +162,11 @@ impl Widget for SettingsScreen {
                 match action.downcast_ref() {
                     Some(CreateDidModalAction::Open) => {
                         use crate::tsp::create_did_modal::CreateDidModalWidgetExt;
-                        self.view.create_did_modal(cx, ids!(create_did_modal_inner)).show(cx);
-                        self.view.modal(cx, ids!(create_did_modal)).open(cx);
+                        self.view.create_did_modal(ids!(create_did_modal_inner)).show(cx);
+                        self.view.modal(ids!(create_did_modal)).open(cx);
                     }
                     Some(CreateDidModalAction::Close) => {
-                        self.view.modal(cx, ids!(create_did_modal)).close(cx);
+                        self.view.modal(ids!(create_did_modal)).close(cx);
                     }
                     None => { }
                 }
@@ -169,8 +186,8 @@ impl SettingsScreen {
             error!("Failed to get own profile for settings screen.");
             return;
         };
-        self.view.account_settings(cx, ids!(account_settings)).populate(cx, profile);
-        self.view.button(cx, ids!(close_button)).reset_hover(cx);
+        self.view.account_settings(ids!(account_settings)).populate(cx, profile);
+        self.view.button(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 3e9a73842..6d7e57785 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -20,56 +20,67 @@ use crate::{
     utils,
 };
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::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.
-    mod.widgets.Avatar = #(Avatar::register_widget(vm)) {
+    pub Avatar = {{Avatar}} {
         width: 36.0,
         height: 36.0,
         // centered horizontally and vertically.
-        align: Align{ x: 0.5, y: 0.5 }
+        align: { x: 0.5, y: 0.5 }
         // the text_view and img_view are overlaid on top of each other.
         flow: Overlay,
 
-        // TODO: use PageFlip to switch between text and image instead of an overlay.
-
-        text_view := CircleView {
+        text_view = <View> {
             visible: true,
-            align: Align { x: 0.5, y: 0.5 }
+            align: { x: 0.5, y: 0.5 }
             show_bg: true,
-            draw_bg.color: (COLOR_AVATAR_BG)
+            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
+                }
+            }
 
-            text := Label {
+            text = <Label> {
                 padding: 0,
-                margin: 0,
                 width: Fit, height: Fit,
                 flow: Right, // do not wrap
-                align: Align{ x: 0.5, y: 0.5 }
-                draw_text +: {
-                    text_style: TITLE_TEXT { font_size: 15. }
+                draw_text: {
+                    text_style: <TITLE_TEXT>{ font_size: 15. }
                     color: #f,
                 }
                 text: "?"
             }
         }
 
-        img_view := CircleView {
+        img_view = <View> {
             visible: false,
-            align: Align { x: 0.5, y: 0.5 }
-            img := Image {
-                fit: ImageFit.Stretch,
+            align: { x: 0.5, y: 0.5 }
+            img = <Image> {
+                fit: Stretch,
                 width: Fill, height: Fill,
-                draw_bg +: {
-                    pixel: fn() {
+                source: (IMG_DEFAULT_AVATAR),
+                draw_bg: {
+                    fn pixel(self) -> vec4 {
                         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());
@@ -82,9 +93,8 @@ script_mod! {
 }
 
 
-#[derive(ScriptHook, Script, Widget)]
+#[derive(LiveHook, Live, Widget)]
 pub struct Avatar {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 
     /// Information about the user profile being shown in this Avatar.
@@ -105,7 +115,8 @@ impl Widget for Avatar {
             }
             Hit::FingerUp(fue) => if fue.is_over && fue.is_primary_hit() && fue.was_tap() {
                 cx.widget_action(
-                    widget_uid, 
+                    widget_uid,
+                    &scope.path,
                     ShowUserProfileAction::ShowUserProfile(info),
                 );
             }
@@ -120,9 +131,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(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);
+        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);
     }
 }
 
@@ -153,18 +164,18 @@ impl Avatar {
                 },
                 room_id,
             });
-            self.view.cursor = Some(MouseCursor::Hand);
+            self.view.apply_over(cx, live!{ cursor: Hand });
         } else {
-            self.info = None;
-            self.view.cursor = Some(MouseCursor::Default);
+            self.view.apply_over(cx, live!{ cursor: Default });
         }
         self.set_text(cx, username.as_ref());
 
         // Apply background color if provided
-        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)
+        if let Some(color) = bg_color {
+            self.view(ids!(text_view)).apply_over(cx, live! {
+                draw_bg: {
+                    background_color: (color)
+                }
             });
         }
     }
@@ -189,11 +200,11 @@ impl Avatar {
     ) -> Result<(), E>
         where F: FnOnce(&mut Cx, ImageRef) -> Result<(), E>
     {
-        let img_ref = self.image(cx, ids!(img_view.img));
+        let img_ref = self.image(ids!(img_view.img));
         let res = image_set_function(cx, img_ref);
         if res.is_ok() {
-            self.view(cx, ids!(img_view)).set_visible(cx, true);
-            self.view(cx, ids!(text_view)).set_visible(cx, false);
+            self.view(ids!(img_view)).set_visible(cx, true);
+            self.view(ids!(text_view)).set_visible(cx, false);
 
             if let Some(AvatarImageInfo { user_id, username, room_id, img_data }) = info {
                 self.info = Some(UserProfileAndRoomId {
@@ -204,18 +215,17 @@ impl Avatar {
                     },
                     room_id,
                 });
-                self.view.cursor = Some(MouseCursor::Hand);
+                self.view.apply_over(cx, live!{ cursor: Hand });
             } else {
-                self.info = None;
-                self.view.cursor = Some(MouseCursor::Default);
+                self.view.apply_over(cx, live!{ cursor: Default });
             }
         }
         res
     }
 
     /// Returns whether this avatar is currently displaying an image or text.
-    pub fn status(&mut self, cx: &mut Cx) -> AvatarDisplayStatus {
-        if self.view(cx, ids!(img_view)).visible() {
+    pub fn status(&mut self) -> AvatarDisplayStatus {
+        if self.view(ids!(img_view)).visible() {
             AvatarDisplayStatus::Image
         } else {
             AvatarDisplayStatus::Text
@@ -379,9 +389,9 @@ impl AvatarRef {
     }
 
     /// See [`Avatar::status()`].
-    pub fn status(&self, cx: &mut Cx) -> AvatarDisplayStatus {
+    pub fn status(&self) -> AvatarDisplayStatus {
         if let Some(mut inner) = self.borrow_mut() {
-            inner.status(cx)
+            inner.status()
         } else {
             AvatarDisplayStatus::Text
         }
@@ -447,10 +457,10 @@ impl From<(OwnedUserId, Option<String>, OwnedRoomId, Arc<[u8]>)> for AvatarImage
 
 
 /// The currently-known state of an avatar for a user, room, or space.
-#[derive(Clone, Default)]
+#[derive(Clone)]
 pub enum AvatarState {
     /// It isn't yet known if this user/room/space has an avatar.
-    #[default] Unknown,
+    Unknown,
     /// It is known that this user/room/space does or does not have an avatar.
     Known(Option<OwnedMxcUri>),
     /// The avatar is known to exist and has been fetched successfully.
diff --git a/src/shared/bouncing_dots.rs b/src/shared/bouncing_dots.rs
index 5b8e79024..0f2e235e2 100644
--- a/src/shared/bouncing_dots.rs
+++ b/src/shared/bouncing_dots.rs
@@ -1,23 +1,24 @@
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
-    mod.widgets.BouncingDots = #(BouncingDots::register_widget(vm)) {
+    pub BouncingDots = {{BouncingDots}} {
         width: 24,
         height: 12,
         flow: Down,
 
         show_bg: true,
-        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);
+        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);
                 let amplitude = self.rect_size.y * 0.21;
                 let center_y = self.rect_size.y * 0.5;
                 // Create three circle SDFs
@@ -43,21 +44,19 @@ script_mod! {
             }
         }
 
-        animator: Animator {
-            dots: {
-                default: @off
-                off: AnimatorState{
-                    redraw: true,
+        animator: {
+            dots = {
+                default: off,
+                off = {
                     from: {all: Forward {duration: 0.0}}
                     apply: {
                         draw_bg: {anim_time: 0.0}
                     }
                 }
-                on: AnimatorState{
-                    redraw: true,
+                on = {
                     from: {all: Loop {duration: 1.0, end: 1.0}}
                     apply: {
-                        draw_bg: {anim_time: 1.0}
+                        draw_bg: {anim_time: [{time: 0.0, value: 0.0}, {time: 1.0, value: 1.0}]}
                     }
                 }
             }
@@ -66,17 +65,14 @@ script_mod! {
     }
 }
 
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 pub struct BouncingDots {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
 }
 impl Widget for BouncingDots {
     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.animator_handle_event(cx, event);
         self.view.handle_event(cx, event, scope);
     }
 
diff --git a/src/shared/callout_tooltip.rs b/src/shared/callout_tooltip.rs
new file mode 100644
index 000000000..0785fa5ed
--- /dev/null
+++ b/src/shared/callout_tooltip.rs
@@ -0,0 +1,517 @@
+//! 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 e9ad7e337..0b6ee0ada 100644
--- a/src/shared/collapsible_header.rs
+++ b/src/shared/collapsible_header.rs
@@ -8,63 +8,66 @@
 //! and its content is also drawn within that PortalList separately from its content.
 
 use makepad_widgets::*;
-use makepad_widgets::animator::Animate;
 
 use crate::home::rooms_list::RoomsListScopeProps;
 
-use super::expand_arrow::ExpandArrow;
-use super::unread_badge::UnreadBadgeWidgetRefExt as _;
+use super::unread_badge::UnreadBadgeWidgetExt;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
+    use link::shaders::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::unread_badge::*;
 
-    mod.widgets.COLOR_HEADER_FG = #F;
+    ICON_COLLAPSE = dep("crate://self/resources/icons/triangle_fill.svg")
 
-    mod.widgets.COLOR_HEADER_BG = (mod.widgets.COLOR_ROBRIX_PURPLE); // the purple color from the Robrix logo
+    COLOR_HEADER_FG = #F;
+    COLOR_HEADER_BG = (COLOR_ROBRIX_PURPLE); // the purple color from the Robrix logo
 
-    mod.widgets.CollapsibleHeader = set_type_default() do #(CollapsibleHeader::register_widget(vm)) {
-        ..mod.widgets.RoundedView
 
+    pub CollapsibleHeader = {{CollapsibleHeader}}<RoundedView> {
         width: Fill,
         height: 35,
-        align: Align{ x: 0.0, y: 0.5 },
-        margin: Inset{top: 3, bottom: 3, left: 0, right: 0},
+        align: { x: 0.0, y: 0.5 },
+        margin: {top: 3, bottom: 3, left: 0, right: 0},
         padding: 5
         flow: Right,
 
-        cursor: MouseCursor.Hand,
-        draw_bg +: {
-            border_radius: 4.0
-            color: mod.widgets.COLOR_HEADER_BG
+        cursor: Hand,
+        draw_bg: {
+            border_radius: 4.0,
+            color: (COLOR_HEADER_BG)
         }
 
-        collapse_icon := mod.widgets.ExpandArrow {
-            width: 20, height: 20,
-            margin: Inset{left: 5, right: 6, top: 0, bottom: 0},
-            draw_bg.color: mod.widgets.COLOR_HEADER_FG
+        collapse_icon = <IconRotated> {
+            margin: {left: 5, right: 8, top: 0, bottom: 0},
+            draw_icon: {
+                svg_file: (ICON_COLLAPSE),
+                rotation_angle: 180.0, // start in the "expanded" state
+                color: (COLOR_HEADER_FG),
+            }
+            icon_walk: { width: 14, height: Fit, margin: 0, }
         }
-
-        label := Label {
+        label = <Label> {
             padding: 0,
             width: Fill,
             height: Fit,
             text: "",
-            draw_text +: {
-                text_style: mod.widgets.REGULAR_TEXT {font_size: 11},
-                color: (mod.widgets.COLOR_HEADER_FG),
+            draw_text: {
+                text_style: <REGULAR_TEXT>{font_size: 11},
+                color: (COLOR_HEADER_FG),
             }
         }
-
-        unread_badge := UnreadBadge {
-            margin: Inset{right: 5.5},
+        unread_badge = <UnreadBadge> {
+            margin: {right: 5.5},
         }
     }
 }
 
 /// The categories of collapsible headers in the rooms list.
-#[derive(Copy, Clone, Debug, Default)]
+#[derive(Copy, Clone, Debug, DefaultNone)]
 pub enum HeaderCategory {
     /// Rooms the user has been invited to but has not yet joined.
     Invites,
@@ -78,7 +81,6 @@ pub enum HeaderCategory {
     LowPriority,
     /// Rooms that the user has left.
     LeftRooms,
-    #[default]
     None,
 }
 impl HeaderCategory {
@@ -95,22 +97,20 @@ impl HeaderCategory {
     }
 }
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum CollapsibleHeaderAction {
     /// The header was clicked to toggled its expanded/collapsed state.
     Toggled {
         category: HeaderCategory,
     },
-    #[default]
     None,
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct CollapsibleHeader {
     #[deref] view: View,
     #[rust(true)] is_expanded: bool,
     #[rust] category: HeaderCategory,
-    #[rust] num_unread_mentions: u64,
 }
 
 impl Widget for CollapsibleHeader {
@@ -132,27 +132,28 @@ impl Widget for CollapsibleHeader {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        // Set arrow and label state during draw to ensure child widgets are available.
-        if let Some(mut arrow) = self.view.child_by_path(ids!(collapse_icon)).borrow_mut::<ExpandArrow>() {
-            arrow.set_is_open_no_animate(self.is_expanded);
-        }
-        self.view.child_by_path(ids!(label)).set_text(cx, self.category.as_str());
-        self.view.child_by_path(ids!(unread_badge))
-            .as_unread_badge()
-            .update_counts(false, self.num_unread_mentions, 0);
+        let angle = if self.is_expanded {
+            180.0
+        } else {
+            90.0
+        };
+        self.icon(ids!(collapse_icon)).apply_over(
+            cx,
+            live! {
+                draw_icon: { rotation_angle: (angle) }
+            },
+        );
         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;
-        if let Some(mut arrow) = self.view.child_by_path(ids!(collapse_icon)).borrow_mut::<ExpandArrow>() {
-            arrow.set_is_open(cx, self.is_expanded, Animate::Yes);
-        }
         self.redraw(cx);
         cx.widget_action(
-            self.widget_uid(), 
+            self.widget_uid(),
+            &scope.path,
             CollapsibleHeaderAction::Toggled {
                 category: self.category,
             },
@@ -164,7 +165,7 @@ impl CollapsibleHeaderRef {
     /// Sets the category and expanded state of the header.
     pub fn set_details(
         &self,
-        _cx: &mut Cx,
+        cx: &mut Cx,
         is_expanded: bool,
         category: HeaderCategory,
         num_unread_mentions: u64,
@@ -172,7 +173,10 @@ impl CollapsibleHeaderRef {
         if let Some(mut inner) = self.borrow_mut() {
             inner.is_expanded = is_expanded;
             inner.category = category;
-            inner.num_unread_mentions = num_unread_mentions;
+            inner.label(ids!(label)).set_text(cx, category.as_str());
+            inner
+                .unread_badge(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
deleted file mode 100644
index bf8a4d091..000000000
--- a/src/shared/command_text_input.rs
+++ /dev/null
@@ -1,925 +0,0 @@
-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: uniform(theme.beveling)
-                border_color: instance(theme.color_bevel)
-                border_radius: uniform(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 := View{
-                visible: true
-                width: Fill
-                height: Fit
-                padding: Inset{left: 12., right: 12., top: 12., bottom: 12.}
-                show_bg: true
-                draw_bg +: {
-                    color: instance(theme.color_fg_app)
-                    top_radius: uniform(theme.corner_radius)
-                    border_color: instance(theme.color_bevel)
-                    border_width: uniform(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 triggered 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>,
-
-    /// Remember 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().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().set_key_focus(cx);
-        }
-
-        if self.is_text_input_focus_pending {
-            self.is_text_input_focus_pending = false;
-            self.text_input_ref().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().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().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());
-                    let current_search = self.search_text();
-
-                    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().widget_uid() {
-                    if let TextInputAction::KeyFocusLost = action.cast() {
-                        self.hide_popup(cx);
-                        self.redraw(cx);
-                    }
-                }
-
-                if action.widget_uid == self.search_input_ref().widget_uid() {
-                    if let TextInputAction::Changed(search) = action.cast() {
-                        // disallow multiline input
-                        self.search_input_ref()
-                            .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());
-        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()));
-
-            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());
-        }
-
-        let text = self.text_input_ref().text();
-        let end = get_head(&self.text_input_ref());
-        // 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().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().set_text(cx, "");
-    }
-
-    fn clear_popup(&mut self, cx: &mut Cx) {
-        self.trigger_position = None;
-        self.search_input_ref().set_text(cx, "");
-        self.search_input_ref().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) -> 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().text();
-                let head = get_head(&self.text_input_ref());
-
-                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().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) -> TextInputRef {
-        self.child_by_path(ids!(text_input)).as_text_input()
-    }
-
-    /// Returns a reference to the inner `TextInput` widget used for search.
-    pub fn search_input_ref(&self) -> TextInputRef {
-        self.child_by_path(ids!(search_input)).as_text_input()
-    }
-
-    fn trigger_grapheme(&self) -> Option<&str> {
-        self.trigger.as_ref().and_then(|t| graphemes(t).next())
-    }
-
-    fn key_controller_text_input_ref(&self) -> TextInputRef {
-        if self.inline_search {
-            self.text_input_ref()
-        } else {
-            self.search_input_ref()
-        }
-    }
-
-    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()
-            .is_some_and(|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) -> TextInputRef {
-        self.borrow()
-            .map_or(WidgetRef::empty().as_text_input(), |inner| {
-                inner.text_input_ref()
-            })
-    }
-
-    /// See [`CommandTextInput::search_input_ref()`].
-    pub fn search_input_ref(&self) -> TextInputRef {
-        self.borrow()
-            .map_or(WidgetRef::empty().as_text_input(), |inner| {
-                inner.search_input_ref()
-            })
-    }
-
-    /// 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) -> String {
-        self.borrow()
-            .map_or(String::new(), |inner| inner.search_text())
-    }
-}
-
-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 998b76eb4..23a008547 100644
--- a/src/shared/confirmation_modal.rs
+++ b/src/shared/confirmation_modal.rs
@@ -5,80 +5,103 @@ use std::borrow::Cow;
 use makepad_widgets::*;
 
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::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.
-    mod.widgets.ConfirmationModal = #(ConfirmationModal::register_widget(vm)) {
+    pub ConfirmationModal = {{ConfirmationModal}} {
         width: Fit
         height: Fit
 
-        wrapper := RoundedView {
+        wrapper = <RoundedView> {
             width: 400
             height: Fit
-            align: Align{x: 0.5}
+            align: {x: 0.5}
             flow: Down
-            padding: Inset{top: 30, right: 40, bottom: 20, left: 40}
+            padding: {top: 30, right: 40, bottom: 20, left: 40}
 
             show_bg: true
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_PRIMARY)
-                border_radius: 4.0
+                border_radius: 4
             }
 
-            title_view := View {
+            title_view = <View> {
                 width: Fill,
                 height: Fit,
-                padding: Inset{top: 0, bottom: 25}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 25}
+                align: {x: 0.5, y: 0.0}
 
-                title := Label {
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 13},
+                title = <Label> {
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 13},
                         color: #000
+                        wrap: Word
                     }
                 }
             }
 
-            body_view := View {
+            body_view = <View> {
                 width: Fill, height: Fit
-                align: Align{x: 0.5, y: 0.0}
+                align: {x: 0.5, y: 0.0}
 
-                body := Label {
+                body = <Label> {
                     width: Fill, height: Fit
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: REGULAR_TEXT {font_size: 11.5},
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{font_size: 11.5},
                         color: #000
+                        wrap: Word
                     }
                 }
             }
 
-            buttons_view := View {
+            buttons_view = <View> {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: Inset{top: 20, bottom: 20}
-                margin: Inset{right: -15}
-                align: Align{x: 1.0, y: 0.5}
+                padding: {top: 20, bottom: 20}
+                margin: {right: -15}
+                align: {x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button := RobrixNeutralIconButton {
+                cancel_button = <RobrixIconButton> {
                     width: 120,
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 15,
-                    icon_walk: Walk{width: 0, height: 0, margin: 0}
+                    icon_walk: {width: 0, height: 0, margin: 0}
+
+                    draw_bg: {
+                        border_size: 0.75
+                        border_color: (COLOR_BG_DISABLED),
+                        color: (COLOR_SECONDARY)
+                    }
+                    draw_text: {
+                        color: (COLOR_TEXT),
+                    }
                     text: "Cancel"
                 }
 
-                accept_button := RobrixPositiveIconButton {
+                accept_button = <RobrixIconButton> {
                     width: 120
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 15,
-                    icon_walk: Walk{width: 0, height: 0, margin: 0}
+                    icon_walk: {width: 0, height: 0, margin: 0}
+
+                    draw_bg: {
+                        border_size: 0.75
+                        border_color: (COLOR_ACTIVE_PRIMARY_DARKER),
+                        color: (COLOR_ACTIVE_PRIMARY)
+                    }
+                    draw_text: {
+                        color: (COLOR_PRIMARY),
+                    }
                     text: "Confirm"
                 }
             }
@@ -87,16 +110,30 @@ script_mod! {
 
     // A confirmation modal for a positive action.
     // The accept button is green with a checkmark icon.
-    mod.widgets.PositiveConfirmationModal = mod.widgets.ConfirmationModal {
-        wrapper +: {
-            buttons_view +: {
-                cancel_button +: {
-                    draw_icon +: { svg: (ICON_FORBIDDEN) }
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1}}
+    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: (ICON_CHECKMARK) }
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{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),
+                    }
                 }
             }
         }
@@ -104,22 +141,30 @@ script_mod! {
 
     // A confirmation modal for a negative action.
     // The accept button is red with a forbidden icon.
-    mod.widgets.NegativeConfirmationModal = mod.widgets.ConfirmationModal {
-        wrapper +: {
-            buttons_view +: {
-                cancel_button := RobrixNeutralIconButton {
-                    width: 120,
-                    align: Align{x: 0.5, y: 0.5}
-                    padding: 15,
-                    draw_icon +: { svg: (ICON_FORBIDDEN) }
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1}}
+    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 := RobrixNegativeIconButton {
-                    width: 120,
-                    align: Align{x: 0.5, y: 0.5}
-                    padding: 15,
-                    draw_icon +: { svg: (ICON_CLOSE) }
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{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),
+                    }
                 }
             }
         }
@@ -127,24 +172,16 @@ script_mod! {
 }
 
 /// Widget actions emitted by the ConfirmationModal.
-#[derive(Clone, Copy, Debug, Default)]
+#[derive(Clone, Copy, Debug, DefaultNone)]
 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.
@@ -188,7 +225,7 @@ impl std::fmt::Debug for ConfirmationModalContent {
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct ConfirmationModal {
     #[deref] view: View,
     #[rust] content: ConfirmationModalContent,
@@ -206,9 +243,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(cx, ids!(accept_button));
-        let cancel_button = self.view.button(cx, ids!(cancel_button));
+    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));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -220,7 +257,8 @@ impl WidgetMatchEvent for ConfirmationModal {
             // an infinite action feedback loop.
             if cancel_clicked {
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     ConfirmationModalAction::Close(false),
                 );
             }
@@ -236,7 +274,8 @@ impl WidgetMatchEvent for ConfirmationModal {
                 on_accept_clicked(cx);
             }
             cx.widget_action(
-                self.widget_uid(), 
+                self.widget_uid(),
+                &scope.path,
                 ConfirmationModalAction::Close(true),
             );
         }
@@ -250,21 +289,21 @@ impl ConfirmationModal {
     }
 
     fn apply_content(&mut self, cx: &mut Cx) {
-        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(
+        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(
             cx,
             self.content.accept_button_text.as_deref().unwrap_or("Confirm"),
         );
-        self.view.button(cx, ids!(cancel_button)).set_text(
+        self.view.button(ids!(cancel_button)).set_text(
             cx,
             self.content.cancel_button_text.as_deref().unwrap_or("Cancel"),
         );
 
-        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.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.redraw(cx);
     }
 }
diff --git a/src/shared/expand_arrow.rs b/src/shared/expand_arrow.rs
deleted file mode 100644
index 4528568d7..000000000
--- a/src/shared/expand_arrow.rs
+++ /dev/null
@@ -1,100 +0,0 @@
-use makepad_widgets::*;
-
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-    mod.widgets.ExpandArrowBase = #(ExpandArrow::register_widget(vm))
-
-    mod.widgets.ExpandArrow = set_type_default() do mod.widgets.ExpandArrowBase {
-        width: 18, height: 18,
-
-        draw_bg +: {
-            opened: instance(0.0)
-            color: instance(#888)
-            border_radius: uniform(2.25)
-
-            pixel: fn() {
-                let corner_round = self.border_radius
-                let sz = self.rect_size.x * 0.3 - corner_round * 0.5
-                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.0))
-
-                // Triangle pointing up; rotation maps opened to:
-                //   0.0 -> 90deg (right-pointing, collapsed)
-                //   1.0 -> 180deg (down-pointing, expanded)
-                sdf.rotate(self.opened * 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()
-
-                // Keep the filled triangle, then slightly expand it with a crisp stroke
-                // to geometrically round sharp corners (no blur).
-                sdf.fill_keep(self.color)
-                return sdf.stroke(self.color, corner_round)
-            }
-        }
-
-        animator: Animator{
-            expand: {
-                default: @collapsed
-                collapsed: AnimatorState{
-                    from: {all: Forward {duration: 0.15}}
-                    ease: ExpDecay {d1: 0.96, d2: 0.97}
-                    redraw: true
-                    apply: { draw_bg: {opened: 0.0} }
-                }
-                expanded: AnimatorState{
-                    from: {all: Forward {duration: 0.15}}
-                    ease: ExpDecay {d1: 0.98, d2: 0.95}
-                    redraw: true
-                    apply: { draw_bg: {opened: 1.0} }
-                }
-            }
-        }
-    }
-}
-
-/// Animated expand/collapse triangle arrow.
-#[derive(Script, ScriptHook, Widget, Animator)]
-pub struct ExpandArrow {
-    #[uid] uid: WidgetUid,
-    #[source] source: ScriptObjectRef,
-    #[apply_default] animator: Animator,
-    #[redraw] #[live] draw_bg: DrawQuad,
-    #[walk] walk: Walk,
-    /// Tracks the desired opened state set from outside.
-    /// Applied to draw_bg.opened during draw_walk.
-    #[rust] opened_value: f32,
-}
-
-impl ExpandArrow {
-    /// Animate open/close (use in event handlers only, not during draw).
-    pub fn set_is_open(&mut self, cx: &mut Cx, is_open: bool, animate: Animate) {
-        self.opened_value = if is_open { 1.0 } else { 0.0 };
-        self.animator_toggle(cx, is_open, animate, ids!(expand.expanded), ids!(expand.collapsed))
-    }
-
-    /// Set open/close state without animation (safe to call anytime).
-    pub fn set_is_open_no_animate(&mut self, is_open: bool) {
-        self.opened_value = if is_open { 1.0 } else { 0.0 };
-    }
-}
-
-impl Widget for ExpandArrow {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, _scope: &mut Scope) {
-        if self.animator_handle_event(cx, event).must_redraw() {
-            self.draw_bg.redraw(cx);
-        }
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
-        if !self.animator.is_track_animating(id!(expand)) {
-            self.draw_bg.set_dyn_instance(cx, id!(opened), &[self.opened_value]);
-        }
-        self.draw_bg.draw_walk(cx, walk);
-        DrawStep::done()
-    }
-}
diff --git a/src/shared/helpers.rs b/src/shared/helpers.rs
index 4962b73be..32d45f6c1 100644
--- a/src/shared/helpers.rs
+++ b/src/shared/helpers.rs
@@ -1,44 +1,55 @@
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-
-    mod.widgets.TitleLabel = Label {
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
+    use link::shaders::*;
 
+    use crate::shared::styles::*;
 
+    pub TitleLabel = <Label> {
         width: Fill, height: Fit
-        margin: Inset{top: 5},
-        flow: Flow.Right{wrap: true},
-        draw_text +: {
-            text_style: TITLE_TEXT {font_size: 15},
+        margin: {top: 5},
+        flow: RightWrap,
+        draw_text: {
+            text_style: <TITLE_TEXT>{font_size: 15},
             color: #000
+            wrap: Word
         }
     }
 
-    mod.widgets.SubsectionLabel = Label {
-
+    pub SubsectionLabel = <Label> {
         width: Fill, height: Fit
-        margin: Inset{top: 5},
+        margin: {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
+
+            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: (COLOR_DIVIDER_DARK)}
     }
 
-    mod.widgets.Filler = View { width: Fill, height: Fill }
-
-    mod.widgets.FillerX = View { width: Fill, height: Fit }
-    mod.widgets.FillerY = View { width: Fit,  height: Fill }
+    pub Filler  = <View> { width: Fill, height: Fill }
+    pub FillerX = <View> { width: Fill, height: Fit }
+    pub FillerY = <View> { width: Fit,  height: Fill }
 }
diff --git a/src/shared/html_or_plaintext.rs b/src/shared/html_or_plaintext.rs
index c86eac05d..4dc1ae2b5 100644
--- a/src/shared/html_or_plaintext.rs
+++ b/src/shared/html_or_plaintext.rs
@@ -1,6 +1,6 @@
 //! A `HtmlOrPlaintext` view can display either plaintext or rich HTML content.
 
-use makepad_widgets::*;
+use makepad_widgets::{makepad_html::HtmlDoc, *};
 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};
@@ -10,41 +10,39 @@ 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);
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::avatar::Avatar;
 
-    mod.widgets.BaseLinkPill = RoundedView {
-
+    BaseLinkPill = <RoundedView> {
         width: Fit, height: Fit,
         flow: Right,
-        align: Align{ y: 0.5 }
-        padding: Inset{ left: 7, right: 7, bottom: 5, top: 5 }
+        align: { y: 0.5 }
+        padding: { left: 7, right: 7, bottom: 5, top: 5 }
         spacing: 5.0,
 
         show_bg: true,
-        draw_bg +: {
-            color: #000
-            border_radius: 7.0
+        draw_bg: {
+            color: #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",
         }
@@ -52,76 +50,59 @@ script_mod! {
 
     // A pill-shaped widget that displays a Matrix link,
     // either a link to a user, a room, or a message in a room.
-    mod.widgets.MatrixLinkPill = #(MatrixLinkPill::register_widget(vm)) { }
+    MatrixLinkPill = {{MatrixLinkPill}}<BaseLinkPill> { }
 
     // 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.
-    mod.widgets.RobrixHtmlLink = #(RobrixHtmlLink::register_widget(vm)) {
+    pub RobrixHtmlLink = {{RobrixHtmlLink}} {
         width: Fit, height: Fit,
-        flow: Flow.Right{wrap: true}, // ensure the link text can wrap
-        align: Align{ y: 0.5 },
-        cursor: MouseCursor.Hand,
+        flow: RightWrap, // ensure the link text can wrap
+        align: { y: 0.5 },
+        cursor: Hand,
 
-        html_link_view := View {
+        html_link_view = <View> {
             visible: true,
             width: Fit, height: Fit,
-            flow: Flow.Right{wrap: true},
+            flow: RightWrap,
 
-            html_link := HtmlLink {
+            html_link = <HtmlLink> {
                 hover_color: (COLOR_LINK_HOVER)
                 grab_key_focus: false,
-                padding: Inset{left: 1.0, right: 1.5},
+                padding: {left: 1.0, right: 1.5},
             }
         }
 
-        matrix_link_view := View {
+        matrix_link_view = <View> {
             visible: false
             width: Fit, height: Fit,
 
-            matrix_link := mod.widgets.MatrixLinkPill { }
+            matrix_link = <MatrixLinkPill> { }
         }
     }
 
     // This is an HTML subwidget used to handle `<font>` and `<span>` tags,
     // specifically: foreground text color, background color, and spoilers.
-    mod.widgets.MatrixHtmlSpan = #(MatrixHtmlSpan::register_widget(vm)) {
+    pub MatrixHtmlSpan = {{MatrixHtmlSpan}} {
         width: Fit, height: Fit,
-        align: Align{x: 0., y: 0.}
+        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.
-    mod.widgets.MessageHtml = Html {
+    pub MessageHtml = <Html> {
         padding: 0.0,
         width: Fill, height: Fit, // see comment in `HtmlOrPlaintext`
-        flow: Flow.Right{wrap: true},
-        align: Align{ y: 0.5 }
+        flow: RightWrap,
+        align: { y: 0.5 }
         font_size: (MESSAGE_FONT_SIZE),
         font_color: (MESSAGE_TEXT_COLOR),
-        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)
-            top_drop: 0.21
-        }
-        draw_block +: {
+        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: {
             line_color: (MESSAGE_TEXT_COLOR)
             sep_color: (MESSAGE_TEXT_COLOR)
             code_color: (#EDEDED)
@@ -129,26 +110,25 @@ script_mod! {
             quote_fg_color: (MESSAGE_TEXT_COLOR)
         }
 
-        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 } }
+        quote_layout: { spacing: 0, padding: {left: 15, top: 10.0, bottom: 10.0}, }
+        quote_walk: { margin: { top: 5, bottom: 5, left: 0 } }
 
-        sep_walk: Walk{ margin: Inset{ top: 10, bottom: 10 } }
+        sep_walk: { margin: { top: 10, bottom: 10 } }
 
-        list_item_layout: Layout{ padding: Inset{left: 5.0, top: 1.0, bottom: 1.0}, }
-        list_item_marker_pad: 8.0
-        list_item_walk: Walk{ margin: Inset{ left: 0, right: 0, top: 1, 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 } }
+        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 } }
 
-        heading_margin: Inset{ top: 1.0, bottom: 0.1 }
-        paragraph_margin: Inset{ top: 0.33, bottom: 0.33 }
+        heading_margin: { top: 1.0, bottom: 0.1 }
+        paragraph_margin: { top: 0.33, bottom: 0.33 }
 
-        inline_code_padding: Inset{top: 3, bottom: 3, left: 4, right: 4 }
-        inline_code_margin: Inset{ left: 3, right: 3, bottom: 2, top: 2 }
+        inline_code_padding: {top: 3, bottom: 3, left: 4, right: 4 }
+        inline_code_margin: { left: 3, right: 3, bottom: 2, top: 2 }
 
-        font := mod.widgets.MatrixHtmlSpan { }
-        span := mod.widgets.MatrixHtmlSpan { }
-        a := mod.widgets.RobrixHtmlLink { }
+        font = <MatrixHtmlSpan> { }
+        span = <MatrixHtmlSpan> { }
+        a = <RobrixHtmlLink> { }
 
         body: "[<i>HTML message placeholder</i>]",
     }
@@ -163,33 +143,34 @@ script_mod! {
     // * 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.
-    mod.widgets.HtmlOrPlaintext = #(HtmlOrPlaintext::register_widget(vm)) {
+    pub HtmlOrPlaintext = {{HtmlOrPlaintext}} {
         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: Flow.Right{wrap: true},
+                flow: RightWrap,
                 padding: 0,
-                draw_text +: {
+                draw_text: {
+                    wrap: Word,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: mod.widgets.MESSAGE_TEXT_STYLE { font_size: (MESSAGE_FONT_SIZE) },
+                    text_style: <MESSAGE_TEXT_STYLE> { font_size: (MESSAGE_FONT_SIZE) },
                 }
             }
         }
 
-        html_view := View {
+        html_view = <View> {
             visible: false,
             width: Fill, height: Fit, // see above comment
-            html := mod.widgets.MessageHtml {}
+            html = <MessageHtml> {}
         }
     }
 }
 
-#[derive(Debug, Clone, Default)]
+#[derive(Debug, Clone, DefaultNone)]
 pub enum RobrixHtmlLinkAction{
     ClickedMatrixLink {
         /// The URL of the link, which is only temporarily needed here
@@ -199,14 +180,13 @@ 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(Script, Widget)]
+#[derive(Live, Widget)]
 struct RobrixHtmlLink {
     #[deref] view: View,
 
@@ -215,22 +195,18 @@ struct RobrixHtmlLink {
     /// when it parses and draws an Html `<a>` tag.
     #[live] pub text: ArcStringMut,
     /// The URL of the link.
-    /// This is set by the `on_after_new_scoped()` hook below.
+    /// This is set by the `after_apply()` logic below.
     #[live] pub url: String,
 }
 
-impl ScriptHook for RobrixHtmlLink {
-    fn on_after_new_scoped(&mut self, _vm: &mut ScriptVm, scope: &mut Scope) {
-        if let Some(doc) = scope.props.get::<makepad_html::HtmlDoc>() {
+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);
-            while let Some((lc, attr)) = walker.while_attr_lc() {
-                match lc {
-                    live_id!(href) => {
-                        self.url = attr.into();
-                        break;
-                    }
-                    _ => { }
-                }
+            if let Some((id!(href), attr)) = walker.while_attr_lc() {
+                self.url = attr.into();
             }
         }
     }
@@ -271,24 +247,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(cx, ids!(matrix_link)).borrow_mut() {
+        if let Some(mut pill) = self.matrix_link_pill(ids!(matrix_link)).borrow_mut() {
             pill.populate_pill(cx, self.url.clone(), matrix_id, via);
         }
-        self.view(cx, ids!(matrix_link_view)).set_visible(cx, true);
-        self.view(cx, ids!(html_link_view)).set_visible(cx, false);
+        self.view(ids!(matrix_link_view)).set_visible(cx, true);
+        self.view(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(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));
+        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));
         html_link.set_url(&self.url);
         html_link.set_text(cx, self.text.as_ref());
     }
 }
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum MatrixLinkPillState {
     Requested,
     Loaded {
@@ -296,14 +272,13 @@ 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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 struct MatrixLinkPill {
     #[deref] view: View,
 
@@ -314,7 +289,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() {
@@ -335,7 +310,8 @@ 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(), 
+                        self.widget_uid(),
+                        &scope.path,
                         RobrixHtmlLinkAction::ClickedMatrixLink {
                             matrix_id,
                             via: self.via.clone(),
@@ -353,14 +329,11 @@ impl Widget for MatrixLinkPill {
     }
 
     fn text(&self) -> String {
-        match &self.state {
-            MatrixLinkPillState::Loaded { name, .. } => name.clone(),
-            _ => String::new(),
-        }
+        self.label(ids!(title)).text()
     }
 
     fn set_text(&mut self, cx: &mut Cx, v: &str) {
-        self.label(cx, ids!(title)).set_text(cx, v);
+        self.label(ids!(title)).set_text(cx, v);
     }
 }
 
@@ -375,8 +348,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) {
-                script_apply_eval!(cx, self, {
-                    draw_bg +: { color: #d91b38}
+                self.apply_over(cx, live! {
+                    draw_bg: { color: #d91b38 }
                 });
             }
 
@@ -402,7 +375,7 @@ impl MatrixLinkPill {
         // Handle room ID or alias
         match &self.state {
             MatrixLinkPillState::Loaded { name, avatar_url, .. } => {
-                self.label(cx, ids!(title)).set_text(cx, name);
+                self.label(ids!(title)).set_text(cx, name);
                 self.populate_avatar(cx, avatar_url.as_ref());
                 return;
             }
@@ -426,7 +399,7 @@ impl MatrixLinkPill {
     }
 
     fn populate_avatar(&self, cx: &mut Cx, avatar_url: Option<&OwnedMxcUri>) {
-        let avatar_ref = self.avatar(cx, ids!(avatar));
+        let avatar_ref = self.avatar(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(
@@ -456,9 +429,8 @@ impl MatrixLinkPillRef {
 }
 
 /// A widget used to display a single HTML `<span>` tag or a `<font>` tag.
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 struct MatrixHtmlSpan {
-    #[uid] uid: WidgetUid,
     // 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.
     #[redraw] #[area] area: Area,
@@ -482,31 +454,6 @@ struct MatrixHtmlSpan {
     #[rust] bg_color: Option<Vec4>,
 }
 
-impl ScriptHook for MatrixHtmlSpan {
-    // After an MatrixHtmlSpan instance has been instantiated, we must
-    // populate its struct fields from the `<span>` or `<font>` tag's attributes.
-    fn on_after_new_scoped(&mut self, _vm: &mut ScriptVm, scope: &mut Scope) {
-        // 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 Some(doc) = scope.props.get::<makepad_html::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 = utils::vec4_from_hex_str(attr),
-                    id!(data-mx-bg-color) => self.bg_color = utils::vec4_from_hex_str(attr),
-                    id!(data-mx-spoiler) => self.spoiler = SpoilerDisplay::Hidden { reason: attr.into() },
-                    _ => ()
-                }
-            }
-        }
-    }
-}
-
-
-
 
 /// The possible states that a spoiler can be in: hidden or revealed.
 ///
@@ -544,13 +491,43 @@ 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;
         for area in &self.drawn_areas {
             match event.hits(cx, *area) {
                 Hit::FingerDown(..) if self.grab_key_focus => {
-                    cx.set_key_focus(self.area);
+                    cx.set_key_focus(self.area());
                 }
                 Hit::FingerHoverIn(..) if self.spoiler.is_some() => {
                     cx.set_cursor(MouseCursor::Hand);
@@ -661,14 +638,13 @@ impl Widget for MatrixHtmlSpan {
 
     fn set_text(&mut self, cx: &mut Cx, v: &str) {
         self.text.as_mut_empty().push_str(v);
-        self.area.redraw(cx);
+        self.redraw(cx);
     }
 }
 
 
-#[derive(ScriptHook, Script, Widget)]
+#[derive(LiveHook, Live, Widget)]
 pub struct HtmlOrPlaintext {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
 }
 
@@ -685,16 +661,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(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());
+        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());
     }
 
     /// 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(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);
+        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);
     }
 }
 
@@ -712,48 +688,4 @@ impl HtmlOrPlaintextRef {
             inner.show_html(cx, html_body);
         }
     }
-
-    /// Sets the color of links in the HTML content.
-    ///
-    /// This modifies the cached `HtmlLink` widget instances inside the inner
-    /// `Html` widget's `TextFlow` items. On the very first draw (before items
-    /// are created), this is a no-op, but subsequent frames will have the
-    /// correct color.
-    pub fn set_link_color(&self, cx: &mut Cx, color: Option<Vec4>) {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.set_link_color(cx, color);
-        }
-    }
-}
-
-impl HtmlOrPlaintext {
-    /// See [`HtmlOrPlaintextRef::set_link_color()`].
-    pub fn set_link_color(&mut self, cx: &mut Cx, color: Option<Vec4>) {
-        let html_ref = self.html(cx, ids!(html_view.html));
-        let Some(mut html) = html_ref.borrow_mut() else { return };
-        // Iterate over cached TextFlow items (auto-generated IDs start at 1)
-        // until we hit a non-existent item.
-        let mut i = 1u64;
-        loop {
-            let item = html.existing_item(LiveId(i));
-            if item.is_empty() { break; }
-            // Check if this item is a RobrixHtmlLink and modify its inner HtmlLink.
-            if let Some(link) = item.borrow_mut::<RobrixHtmlLink>() {
-                let mut html_link = link.html_link(cx, ids!(html_link));
-                match color {
-                    Some(c) => {
-                        script_apply_eval!(cx, html_link, {
-                            color: #(c)
-                        });
-                    }
-                    None => {
-                        script_apply_eval!(cx, html_link, {
-                            color: nil
-                        });
-                    }
-                }
-            }
-            i += 1;
-        }
-    }
 }
diff --git a/src/shared/icon_button.rs b/src/shared/icon_button.rs
index 33330fe44..8030d113f 100644
--- a/src/shared/icon_button.rs
+++ b/src/shared/icon_button.rs
@@ -1,128 +1,115 @@
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
-    // The base Robrix button widget.
-    // Uses COLOR_ACTIVE_PRIMARY (blue) background with white text by default.
-    // See also the preset variants below:
-    //   RobrixPositiveIconButton, RobrixNegativeIconButton, RobrixNeutralIconButton.
-    mod.widgets.RobrixIconButton = Button {
-        width: Fit,
-        height: Fit,
-        spacing: 10,
-        padding: 10,
-        align: Align{x: 0, y: 0.5}
+    use crate::shared::styles::*;
 
-        // Disable focus visual styling entirely so that clicking a button
-        // and hovering away doesn't leave it stuck on the theme's focus color.
-        // This works by keeping the `focus` uniform at 0.0 in both on/off states,
-        // so the shader's `mix(color, color_focus, focus)` always evaluates to just `color`.
-        animator +: {
-            focus: {
-                default: @off
-                off: AnimatorState {
-                    from: {all: Forward {duration: 0.0}}
-                    apply: {
-                        draw_bg: {focus: 0.0}
-                        draw_text: {focus: 0.0}
-                    }
-                }
-                on: AnimatorState {
-                    from: {all: Forward {duration: 0.0}}
-                    apply: {
-                        draw_bg: {focus: 0.0}
-                        draw_text: {focus: 0.0}
-                    }
-                }
+    COLOR_BRAND = #x5
+    COLOR_BRAND_HOVER = #x3
+    COLOR_META_TEXT = #xaaa
+
+    pub IconButton = <Button> {
+        draw_text: {
+            instance hover: 0.0
+            instance down: 0.0
+            text_style: {
+                font_size: 11.0
+            }
+            fn get_color(self) -> vec4 {
+                return mix(
+                    mix(
+                        (COLOR_META_TEXT),
+                        (COLOR_BRAND),
+                        self.hover
+                    ),
+                    (COLOR_BRAND_HOVER),
+                    self.down
+                )
             }
         }
-
-        draw_bg +: {
-            border_size: 0.0
-            border_radius: 4.0
-
-            color: (COLOR_ACTIVE_PRIMARY)
-            color_hover: (COLOR_ACTIVE_PRIMARY_DARKER)
-            color_down: #0C5DAA
-            color_disabled: (COLOR_BG_DISABLED)
-
-            border_color: #0000
-            border_color_hover: #0000
-            border_color_down: #0000
-            border_color_focus: #0000
-            border_color_disabled: #0000
-
-            // Disable gradient (color_2) by default
-            color_2: vec4(-1.0, -1.0, -1.0, -1.0)
-            border_color_2: vec4(-1.0, -1.0, -1.0, -1.0)
+        draw_icon: {
+            fn get_color(self) -> vec4 {
+                return mix(
+                    mix(
+                        (COLOR_META),
+                        (COLOR_BRAND),
+                        self.hover
+                    ),
+                    (COLOR_BRAND_HOVER),
+                    self.down
+                )
+            }
         }
-
-        draw_icon.color: (COLOR_PRIMARY)
-        icon_walk: Walk{width: 16, height: 16}
-
-        draw_text +: {
-            color: (COLOR_PRIMARY)
-            color_hover: (COLOR_PRIMARY)
-            color_down: (COLOR_PRIMARY)
-            color_disabled: (COLOR_FG_DISABLED)
-            text_style: mod.widgets.REGULAR_TEXT {font_size: 10},
+        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);
+                return sdf.result
+            }
         }
+        padding: 9.0
         text: ""
     }
 
-    // Green button for positive/accept actions: joining a room, confirming, accepting an invite.
-    mod.widgets.RobrixPositiveIconButton = mod.widgets.RobrixIconButton {
-        draw_bg +: {
-            border_color: (COLOR_FG_ACCEPT_GREEN)
-            border_color_hover: (COLOR_FG_ACCEPT_GREEN)
-            border_color_down: (COLOR_FG_ACCEPT_GREEN)
-            color: (COLOR_BG_ACCEPT_GREEN)
-            color_hover: #D4EED4
-            color_down: #B8E0B8
-        }
-        draw_icon.color: (COLOR_FG_ACCEPT_GREEN)
-        draw_text +: {
-            color: (COLOR_FG_ACCEPT_GREEN)
-            color_hover: (COLOR_FG_ACCEPT_GREEN)
-            color_down: (COLOR_FG_ACCEPT_GREEN)
-        }
-    }
 
-    // Red button for negative/dangerous actions: rejecting, leaving, deleting, blocking.
-    mod.widgets.RobrixNegativeIconButton = mod.widgets.RobrixIconButton {
-        draw_bg +: {
-            border_color: (COLOR_FG_DANGER_RED)
-            border_color_hover: (COLOR_FG_DANGER_RED)
-            border_color_down: (COLOR_FG_DANGER_RED)
-            color: (COLOR_BG_DANGER_RED)
-            color_hover: #F0D4D4
-            color_down: #E0B8B8
-        }
-        draw_icon.color: (COLOR_FG_DANGER_RED)
-        draw_text +: {
-            color: (COLOR_FG_DANGER_RED)
-            color_hover: (COLOR_FG_DANGER_RED)
-            color_down: (COLOR_FG_DANGER_RED)
+    // Customized button widget, based on the RoundedView shaders with some modifications
+    // which is a better fit with our application UI design
+    pub RobrixIconButton = <Button> {
+        width: Fit,
+        height: Fit,
+        spacing: 10,
+        padding: 10,
+        align: {x: 0, y: 0.5}
+
+        draw_bg: {
+            instance color: (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
+
+            fn get_color(self) -> 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)
+                sdf.box(
+                    self.border_size,
+                    self.border_size,
+                    self.rect_size.x - (self.border_size * 2.0),
+                    self.rect_size.y - (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.border_color, self.border_size)
+                }
+                return sdf.result;
+            }
         }
-    }
 
-    // Gray button for cancel/dismiss actions: canceling, closing, going back.
-    mod.widgets.RobrixNeutralIconButton = mod.widgets.RobrixIconButton {
-        draw_bg +: {
-            border_color: (COLOR_BG_DISABLED)
-            border_color_hover: (COLOR_BG_DISABLED)
-            border_color_down: (COLOR_BG_DISABLED)
-            color: (COLOR_SECONDARY)
-            color_hover: #D0D0D0
-            color_down: #C0C0C0
+        draw_icon: {
+            instance color: #000
+            instance color_hover: #000
+            fn get_color(self) -> vec4 {
+                return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
+            }
         }
-        draw_icon.color: (COLOR_TEXT)
-        draw_text +: {
-            color: (COLOR_TEXT)
-            color_hover: (COLOR_TEXT)
-            color_down: (COLOR_TEXT)
+        icon_walk: {width: 16, height: 16}
+
+        draw_text: {
+            text_style: <REGULAR_TEXT>{font_size: 10},
+            color: #000
+            fn get_color(self) -> vec4 {
+                return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
+            }
         }
+        text: ""
     }
 }
diff --git a/src/shared/image_viewer.rs b/src/shared/image_viewer.rs
index 93eaeec82..42b91e0d2 100644
--- a/src/shared/image_viewer.rs
+++ b/src/shared/image_viewer.rs
@@ -8,14 +8,12 @@ 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::{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;
@@ -104,160 +102,164 @@ impl Default for DragState {
     }
 }
 
-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
+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;
 
-    mod.widgets.ImageViewerButton = RobrixNeutralIconButton {
+    UI_ANIMATION_DURATION_SECS = 0.5
+    ROTATION_ANIMATION_DURATION_SECS = 0.2
 
+    ImageViewerButton = <RobrixIconButton> {
         width: 44, height: 44
-        align: Align{x: 0.5, y: 0.5},
+        align: {x: 0.5, y: 0.5},
         spacing: 0,
         padding: 0,
-        draw_bg.color: (COLOR_SECONDARY * 0.925)
-        draw_icon +: {
-            svg: (ICON_ZOOM_OUT),
-            color: #000
+        draw_bg: {
+            color: (COLOR_SECONDARY * 0.925)
         }
-        icon_walk: Walk{width: 27, height: 27}
+        draw_icon: {
+            svg_file: (ICON_ZOOM_OUT),
+            fn get_color(self) -> vec4 {
+                return #x0;
+            }
+        }
+        icon_walk: {width: 27, height: 27}
     }
 
-    mod.widgets.ImageViewer = set_type_default() do #(ImageViewer::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub ImageViewer = {{ImageViewer}} {
         width: Fill, height: Fill,
         flow: Overlay
         show_bg: true
-        draw_bg +: {
+        draw_bg: {
             color: (COLOR_IMAGE_VIEWER_BACKGROUND)
         }
 
-        image_layer := View {
+        image_layer = <View> {
             width: Fill, height: Fill,
-            align: Align{x: 0.5, y: 0.5}
+            align: {x: 0.5, y: 0.5}
             flow: Down
 
-            rotated_image_container := View {
+            rotated_image_container = <View> {
                 width: Fill, height: Fill,
                 flow: Down
-                align: Align{x: 0.5, y: 0.5}
-                rotated_image := Image {
+                align: {x: 0.5, y: 0.5}
+                rotated_image = <RotatedImage> {
                     width: Fill, height: Fill,
-                    fit: ImageFit.Smallest
+                    draw_bg: {
+                        rotation: 0.0
+                        opacity: 1.0
+                    }
                 }
             }
 
-            footer := View {
+            footer = <View> {
                 width: Fill, height: 50,
                 flow: Right
                 padding: 10
-                align: Align{x: 0.5, y: 0.8}
+                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 +: {
+                        draw_bg: {
                             color: (COLOR_TEXT)
-                            border_size: 3.0
+                            border_size: 3.0,
                         }
                     }
                 }
 
-                image_viewer_forbidden_view := View {
+                image_viewer_forbidden_view = <View> {
                     width: Fit, height: Fit
                     visible: false
-                    Icon {
-                        draw_icon +: {
-                            svg: (ICON_FORBIDDEN),
+                    <Icon> {
+                        draw_icon: {
+                            svg_file: (ICON_FORBIDDEN),
                             color: (COLOR_TEXT),
                         }
-                        icon_walk: Walk{ width: 30, height: 30 }
+                        icon_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: Align{x: 0.0, y: 1.0},
-            metadata_rounded_view := RoundedView {
+            align: {x: 0.0, y: 1.0},
+            metadata_rounded_view = <RoundedView> {
                 width: Fill, height: Fit
                 flow: Right
-                align: Align{y: 0.5, x: 0.0}
+                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)
                 }
 
                 // Display user profile view below the button group when the width is not enough.
-                user_profile_view := View {
-                    width: Fit,
+                user_profile_view = <View> {
+                    width: Fit { max: 200 }
                     height: Fit,
                     flow: Right,
                     spacing: 13,
-                    align: Align{ y: 0.5 }
+                    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: Align{ y: 0.5 }
+                        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
                             }
                         }
 
-                        timestamp_view := View {
+                        timestamp_view = <View> {
                             width: Fit
                             height: Fit
 
-                            timestamp := Timestamp {
+                            timestamp = <Timestamp> {
                                 width: Fit,
                                 height: Fit,
-                                ts_label := Label {
-                                    draw_text +: {
-                                        text_style: theme.font_regular {font_size: 9.5},
+                                ts_label = {
+                                    draw_text: {
+                                        text_style: {font_size: 9.5},
                                         color: (COLOR_TEXT)
                                     }
                                 }
@@ -267,161 +269,185 @@ script_mod! {
                 }
 
                 // 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: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     flow: Right
-                    image_name_and_size := Label {
+                    image_name_and_size = <Label> {
                         width: Fill,
                         height: Fit,
-                        align: Align{x: 0.5, y: 0.5}
-                        flow: Flow.Right{wrap: true}
-                        draw_text +: {
-                            text_style: REGULAR_TEXT {font_size: 13},
+                        align: {x: 0.5, y: 0.5}
+                        draw_text: {
+                            text_style: <REGULAR_TEXT>{font_size: 13},
                             color: (COLOR_TEXT),
+                            wrap: Word
                         }
                     }
                 }
             }
         }
 
-        button_group_view := View {
+        button_group_view = <View> {
             width: Fill, height: Fit
             flow: Right
-            margin: Inset{top: 20, right: 20}
-            align: Align{x: 1.0, y: 0.5},
+            margin: {top: 20, right: 20}
+            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 +: {
+                draw_bg: {
                     color: (COLOR_IMAGE_VIEWER_META_BACKGROUND),
                     border_radius: 4.0
                 }
-                padding: Inset{ left: 7, top: 4, bottom: 4, right: 7}
+                padding: { left: 7, top: 4, bottom: 4, right: 7}
 
-                zoom_out_button := mod.widgets.ImageViewerButton {
-                    draw_icon +: { svg: (ICON_ZOOM_OUT) }
-                    icon_walk: Walk{width: 27, height: 27, margin: Inset{left: 2}}
+                zoom_out_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ZOOM_OUT) }
+                    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}}
+                zoom_in_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ZOOM_IN) }
+                    icon_walk: {width: 27, height: 27, margin: {left: 2}}
                 }
 
-                rotate_ccw_button := mod.widgets.ImageViewerButton {
-                    draw_icon +: { svg: (ICON_ROTATE_CCW) }
+                rotate_ccw_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ROTATE_CCW) }
                 }
 
-                rotate_cw_button := mod.widgets.ImageViewerButton {
-                    draw_icon +: { svg: (ICON_ROTATE_CW) }
+                rotate_cw_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ROTATE_CW) }
                 }
 
-                reset_button := mod.widgets.ImageViewerButton {
-                    draw_icon +: { svg: (ICON_JUMP) }
-                    icon_walk: Walk{width: 25, height: 25, margin: Inset{bottom: 2}}
+                reset_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_JUMP) }
+                    icon_walk: {width: 25, height: 25, margin: {bottom: 2}}
                 }
 
-                close_button := mod.widgets.ImageViewerButton {
-                    draw_icon +: { svg: (ICON_CLOSE) }
-                    icon_walk: Walk{width: 21, height: 21 }
+                close_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_CLOSE) }
+                    icon_walk: {width: 21, height: 21 }
                 }
             }
         }
 
-        animator: Animator{
-            mode: {
-                default: @upright
-                degree_neg90: AnimatorState{
+        animator: {
+            mode = {
+                default: upright,
+                degree_neg90 = {
                     redraw: false,
-                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
-                        image_layer: { rotated_image_container: { rotated_image: {
-                            draw_bg: {rotation: -90.0}
-                        }}}
+                        image_layer = {
+                            rotated_image_container = {
+                                rotated_image = {
+                                    draw_bg: {rotation: -1.5708}
+                                }
+                            }
+                        }
                     }
                 }
-                upright: AnimatorState{
+                upright = {
                     redraw: false,
-                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
-                        image_layer: { rotated_image_container: { rotated_image: {
-                            draw_bg: {rotation: 0.0}
-                        }}}
+                        image_layer = {
+                            rotated_image_container = {
+                                rotated_image = {
+                                    draw_bg: {rotation: 0.0}
+                                }
+                            }
+                        }
                     }
                 }
-                degree_90: AnimatorState{
+                degree_90 = {
                     redraw: false,
-                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
-                        image_layer: { rotated_image_container: { rotated_image: {
-                            draw_bg: {rotation: 90.0}
-                        }}}
+                        image_layer = {
+                            rotated_image_container = {
+                                rotated_image = {
+                                    draw_bg: {rotation: 1.5708}
+                                }
+                            }
+                        }
                     }
                 }
-                degree_180: AnimatorState{
+                degree_180 = {
                     redraw: false,
-                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
-                        image_layer: { rotated_image_container: { rotated_image: {
-                            draw_bg: {rotation: 180.0}
-                        }}}
+                        image_layer = {
+                            rotated_image_container = {
+                                rotated_image = {
+                                    draw_bg: {rotation: 3.14159}
+                                }
+                            }
+                        }
                     }
                 }
-                degree_270: AnimatorState{
+                degree_270 = {
                     redraw: false,
-                    from: {all: Forward {duration: (mod.widgets.ROTATION_ANIMATION_DURATION_SECS)}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
-                        image_layer: { rotated_image_container: { rotated_image: {
-                            draw_bg: {rotation: 270.0}
-                        }}}
+                        image_layer = {
+                            rotated_image_container = {
+                                rotated_image = {
+                                    draw_bg: {rotation: 4.71239}
+                                }
+                            }
+                        }
                     }
                 }
-                degree_360: AnimatorState{
+                degree_360 = {
                     redraw: false,
                     from: {all: Forward {duration: 0.0}}
                     apply: {
-                        image_layer: { rotated_image_container: { rotated_image: {
-                            draw_bg: {rotation: 360.0}
-                        }}}
+                        image_layer = {
+                            rotated_image_container = {
+                                rotated_image = {
+                                    draw_bg: {rotation: 6.28318}
+                                }
+                            }
+                        }
                     }
                 }
             }
-            hover: {
-                default: @off
-                off: AnimatorState{
+            hover = {
+                default: off
+                off = {
                     apply: { }
                 }
-                on: AnimatorState{
+                on = {
                     apply: { }
                 }
             }
-            ui_animator: {
-                default: @hide
-                show: AnimatorState{
+            ui_animator = {
+                default: hide,
+                show = {
                     redraw: false,
-                    from: { all: Forward { duration: (mod.widgets.UI_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (UI_ANIMATION_DURATION_SECS) } }
                     apply: {
-                        button_group_view: {
-                            margin: Inset{ top: 20 }
+                        button_group_view = {
+                            margin: { top: 20 }
                         }
-                        metadata_view: {
-                            margin: Inset{ bottom: 20 }
+                        metadata_view = {
+                            margin: { bottom: 20 }
                         }
                     }
                 }
-                hide: AnimatorState{
+                hide = {
                     redraw: false,
-                    from: { all: Forward { duration: (mod.widgets.UI_ANIMATION_DURATION_SECS) } }
+                    from: { all: Forward { duration: (UI_ANIMATION_DURATION_SECS) } }
                     apply: {
-                        button_group_view: {
-                            margin: Inset{ top: -200 }
+                        button_group_view = {
+                            margin: { top: -200 }
                         }
-                        metadata_view: {
-                            margin: Inset{ bottom: -300 }
+                        metadata_view = {
+                            margin: { bottom: -300 }
                         }
                     }
                 }
@@ -432,10 +458,9 @@ script_mod! {
 
 /// Actions emitted by the `ImageViewer` widget.
 #[allow(clippy::large_enum_variant)]
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum ImageViewerAction {
     /// No action.
-    #[default]
     None,
     /// Display the ImageViewer widget based on the LoadState.
     Show(LoadState),
@@ -443,16 +468,15 @@ pub enum ImageViewerAction {
     Hide,
 }
 
-#[derive(Script, ScriptHook, Widget, Animator)]
+#[derive(Live, LiveHook, Widget)]
 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
     #[rust] rotation_step: i8,
     /// A lock to prevent multiple rotation animations from running at the same time
     #[rust] is_animating_rotation: bool,
-    #[apply_default] animator: Animator,
+    #[animator] animator: Animator,
     /// Zoom constraints for the image viewer
     #[rust] config: ImageViewerZoomConfig,
     /// Indicates if the mouse cursor is currently hovering over the image.
@@ -504,29 +528,35 @@ 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 mut rotated_image = self.view.image(cx, ids!(rotated_image));
+                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;
 
                 if let Some(offset) = saved_pan_offset {
-                    script_apply_eval!(cx, rotated_image, {
-                        margin +: { top: #(offset.y), left: #(offset.x) },
-                        width: #(width),
-                        height: #(height),
-                    });
+                    rotated_image.apply_over(
+                        cx,
+                        live! {
+                            margin: { top: (offset.y), left: (offset.x) },
+                            width: (width),
+                            height: (height),
+                        },
+                    );
                 } else {
-                    script_apply_eval!(cx, rotated_image, {
-                        width: #(width),
-                        height: #(height),
-                    });
+                    rotated_image.apply_over(
+                        cx,
+                        live! {
+                            width: (width),
+                            height: (height),
+                        },
+                    );
                 }
             }
         }
 
         // 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.image(cx, ids!(rotated_image));
-        let button_group_rounded_view = self.view.view(cx, ids!(button_group_rounded_view));
+        let rotated_image = self.view.rotated_image(ids!(rotated_image));
+        let button_group_rounded_view = self.view.view(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);
@@ -543,7 +573,7 @@ impl Widget for ImageViewer {
             }
             _ => {}
         }
-        match event.hits(cx, self.view.view(cx, ids!(metadata_rounded_view)).area()) {
+        match event.hits(cx, self.view.view(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));
@@ -568,10 +598,13 @@ 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 mut rotated_image_container = self.view.image(cx, ids!(rotated_image));
-                    script_apply_eval!(cx, rotated_image_container, {
-                        margin +: { top: 0.0, left: 0.0 },
-                    });
+                    let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
+                    rotated_image_container.apply_over(
+                        cx,
+                        live! {
+                            margin: { top: 0.0, left: 0.0 },
+                        },
+                    );
                     rotated_image_container.redraw(cx);
                 }
                 self.ui_visible_toggle = !self.ui_visible_toggle;
@@ -590,13 +623,16 @@ 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 mut rotated_image_container = self.view.image(cx, ids!(rotated_image));
+                    let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
                     let size = rotated_image_container.area().rect(cx).size;
-                    script_apply_eval!(cx, rotated_image_container, {
-                        margin +: { top: #(new_offset.y), left: #(new_offset.x) },
-                        width: #(size.x),
-                        height: #(size.y)
-                    });
+                    rotated_image_container.apply_over(
+                        cx,
+                        live! {
+                            margin: { top: (new_offset.y), left: (new_offset.x) },
+                            width: (size.x),
+                            height: (size.y)
+                        },
+                    );
 
                     // Update pan_offset with new position
                     self.drag_state.pan_offset = Some(new_offset);
@@ -609,7 +645,7 @@ impl Widget for ImageViewer {
             }
             Hit::FingerHoverOver(_) => {
                 if !self.ui_visible_toggle
-                    && !self.animator.in_state(cx, ids!(ui_animator.show))
+                    && !self.animator.animator_in_state(cx, ids!(ui_animator.show))
                 {
                     self.animator_cut(cx, ids!(ui_animator.hide));
                     self.animator_play(cx, ids!(ui_animator.show));
@@ -655,9 +691,9 @@ 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 texture = image_buffer.into_new_texture(cx);
-                    self.texture = Some(texture);
-                    self.next_frame = cx.new_next_frame();
+                    rotated_image.set_texture(cx, Some(texture));
                     remove_receiver = true;
                     cx.action(ImageViewerAction::Show(
                         LoadState::FinishedBackgroundDecoding,
@@ -694,8 +730,8 @@ impl Widget for ImageViewer {
                 3 => ids!(mode.degree_270), // 270°
                 _ => ids!(mode.upright),
             };
-            if self.animator.in_state(cx, animation_id) {
-                self.is_animating_rotation = matches!(animator_action, AnimatorAction::Animating { .. });
+            if self.animator.animator_in_state(cx, animation_id) {
+                self.is_animating_rotation = animator_action.is_animating();
             }
         }
 
@@ -723,16 +759,16 @@ impl Widget for ImageViewer {
 
 impl MatchEvent for ImageViewer {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        if self.view.button(cx, ids!(close_button)).clicked(actions) {
+        if self.view.button(ids!(close_button)).clicked(actions) {
             self.reset(cx);
             cx.action(ImageViewerAction::Hide);
         }
-        if self.view.button(cx, ids!(reset_button)).clicked(actions) {
+        if self.view.button(ids!(reset_button)).clicked(actions) {
             self.reset(cx);
         }
         if self
             .view
-            .button(cx, ids!(zoom_out_button))
+            .button(ids!(zoom_out_button))
             .clicked(actions)
         {
             self.adjust_zoom(cx, 1.0 / self.config.zoom_scale_factor);
@@ -740,7 +776,7 @@ impl MatchEvent for ImageViewer {
 
         if self
             .view
-            .button(cx, ids!(zoom_in_button))
+            .button(ids!(zoom_in_button))
             .clicked(actions)
         {
             self.adjust_zoom(cx, self.config.zoom_scale_factor);
@@ -748,7 +784,7 @@ impl MatchEvent for ImageViewer {
 
         if self
             .view
-            .button(cx, ids!(rotate_cw_button))
+            .button(ids!(rotate_cw_button))
             .clicked(actions)
         {
             if !self.is_animating_rotation {
@@ -763,7 +799,7 @@ impl MatchEvent for ImageViewer {
 
         if self
             .view
-            .button(cx, ids!(rotate_ccw_button))
+            .button(ids!(rotate_ccw_button))
             .clicked(actions)
         {
             if !self.is_animating_rotation {
@@ -822,7 +858,10 @@ impl ImageViewer {
         self.animator_cut(cx, ids!(mode.upright));
         let rotated_image_ref = self
             .view
-            .image(cx, ids!(rotated_image_container.rotated_image));
+            .rotated_image(ids!(rotated_image_container.rotated_image));
+        rotated_image_ref.apply_over(cx, live! {
+            draw_bg: { scale: 1.0 }
+        });
         rotated_image_ref.set_texture(cx, None);
     }
 
@@ -838,20 +877,6 @@ impl ImageViewer {
             _ => ids!(mode.upright),
         };
         self.animator_play(cx, animation_id);
-
-        // Also directly set the rotation value on the image's draw_bg shader,
-        // in case the animator apply paths don't work for deeply nested children.
-        let rotation_deg = match self.rotation_step {
-            0 => 0.0_f64,
-            1 => 90.0,
-            2 => 180.0,
-            3 => 270.0,
-            _ => 0.0,
-        };
-        let mut rotated_image = self.view.image(cx, ids!(rotated_image));
-        script_apply_eval!(cx, rotated_image, {
-            draw_bg +: { rotation: #(rotation_deg) }
-        });
     }
 
     /// Resets the drag state of the modal to its initial state.
@@ -861,10 +886,14 @@ impl ImageViewer {
         self.drag_state = DragState::default();
 
         // Reset image position and scale
-        let mut rotated_image_container = self.view.image(cx, ids!(rotated_image));
-        script_apply_eval!(cx, rotated_image_container, {
-            margin +: { top: 0.0, left: 0.0 }
-        });
+        let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
+        rotated_image_container.apply_over(
+            cx,
+            live! {
+                margin: { top: 0.0, left: 0.0 },
+                draw_bg: { scale: 1.0 }
+            },
+        );
         rotated_image_container.redraw(cx);
 
         self.update_rotation_animation(cx);
@@ -899,7 +928,7 @@ impl ImageViewer {
             return;
         }
         let texture = self.texture.clone();
-        let mut rotated_image = self.image(cx, ids!(rotated_image));
+        let rotated_image = self.rotated_image(ids!(rotated_image));
         let (texture_width, texture_height) = texture
             .as_ref()
             .and_then(|texture| texture.get_format(cx).vec_width_height())
@@ -920,15 +949,18 @@ impl ImageViewer {
         };
         
         rotated_image.set_texture(cx, texture);
-        script_apply_eval!(cx, rotated_image, {
-            width: #(capped_width),
-            height: #(capped_height),
-        });
+        rotated_image.apply_over(
+            cx,
+            live! {
+                width: (capped_width),
+                height: (capped_height),
+            },
+        );
     }
 
     /// 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 mut rotated_image = self.view.image(cx, ids!(rotated_image));
+        let rotated_image = self.view.rotated_image(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;
@@ -943,9 +975,9 @@ impl ImageViewer {
             (width, height)
         };
 
-        script_apply_eval!(cx, rotated_image, {
-            width: #(width),
-            height: #(height),
+        rotated_image.apply_over(cx, live! {
+            width: (width),
+            height: (height),
         });
     }
 
@@ -985,12 +1017,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(cx, ids!(image_layer.footer));
-        footer.view(cx, ids!(image_viewer_loading_spinner_view))
+        let footer = self.view.view(ids!(image_layer.footer));
+        footer
+            .view(ids!(image_viewer_loading_spinner_view))
             .set_visible(cx, true);
-        footer.label(cx, ids!(image_viewer_status_label))
+        footer
+            .label(ids!(image_viewer_status_label))
             .set_text(cx, "Loading...");
-        footer.view(cx, ids!(image_viewer_forbidden_view))
+        footer
+            .view(ids!(image_viewer_forbidden_view))
             .set_visible(cx, false);
         footer.set_visible(cx, true);
         self.ui_visible_toggle = true;
@@ -1006,19 +1041,22 @@ impl ImageViewer {
         if self.is_loaded {
             return;
         }
-        let footer = self.view.view(cx, ids!(image_layer.footer));
-        footer.view(cx, ids!(image_viewer_loading_spinner_view))
+        let footer = self.view.view(ids!(image_layer.footer));
+        footer
+            .view(ids!(image_viewer_loading_spinner_view))
             .set_visible(cx, false);
-        footer.view(cx, ids!(image_viewer_forbidden_view))
+        footer
+            .view(ids!(image_viewer_forbidden_view))
             .set_visible(cx, true);
-        footer.label(cx, ids!(image_viewer_status_label))
+        footer
+            .label(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(cx, ids!(image_layer.footer));
+        let footer = self.view.view(ids!(image_layer.footer));
         footer.set_visible(cx, false);
     }
 
@@ -1029,24 +1067,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(cx, ids!(metadata_view));
+        let meta_view = self.view.view(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(cx, ids!(image_name_and_size))
+            .label(ids!(image_name_and_size))
             .set_text(cx, &display_text);
         if let Some(timestamp) = metadata.timestamp {
             meta_view
-                .view(cx, ids!(user_profile_view.content.timestamp_view))
+                .view(ids!(user_profile_view.content.timestamp_view))
                 .set_visible(cx, true);
             meta_view
-                .timestamp(cx, ids!(user_profile_view.content.timestamp_view.timestamp))
+                .timestamp(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(cx, ids!(user_profile_view.avatar)).set_avatar_and_get_username(
+            let (sender, _) = self.view.avatar(ids!(user_profile_view.avatar)).set_avatar_and_get_username(
                 cx,
                 timeline_kind,
                 event_timeline_item.sender(),
@@ -1056,11 +1094,11 @@ impl ImageViewer {
             );
             if sender.len() > MAX_USERNAME_LENGTH {
                 meta_view
-                    .label(cx, ids!(user_profile_view.content.username))
+                    .label(ids!(user_profile_view.content.username))
                     .set_text(cx, &format!("{}...", &sender[..MAX_USERNAME_LENGTH - 3]));
             } else {
                 meta_view
-                    .label(cx, ids!(user_profile_view.content.username))
+                    .label(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 9fb9a840f..24bfb8a82 100644
--- a/src/shared/jump_to_bottom_button.rs
+++ b/src/shared/jump_to_bottom_button.rs
@@ -1,78 +1,69 @@
 use makepad_widgets::*;
+use crate::shared::callout_tooltip::{CalloutTooltipOptions, TooltipAction, TooltipPosition};
 
 const SCROLL_TO_BOTTOM_SPEED: f64 = 90.0;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::*;
 
-    mod.widgets.ICO_JUMP_TO_BOTTOM = crate_resource("self://resources/icon_jump_to_bottom.svg")
+    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.
-    mod.widgets.JumpToBottomButton = #(JumpToBottomButton::register_widget(vm)) {
+    pub JumpToBottomButton = {{JumpToBottomButton}} {
         width: Fill,
         height: Fill,
         flow: Overlay,
-        align: Align{x: 1.0, y: 1.0},
+        align: {x: 1.0, y: 1.0},
         visible: false,
-        View {
+        <View> {
             width: 65, height: 75,
-            align: Align{x: 0.5, y: 1.0},
+            align: {x: 0.5, y: 1.0},
             flow: Overlay,
-            inner_button := RobrixIconButton {
+            jump_to_bottom_button = <IconButton> {
                 spacing: 0,
                 width: 50, height: 50,
-                align: Align{x: 0.5, y: 0.5},
-                margin: Inset{bottom: 8},
-                draw_icon +: {
-                    svg: (mod.widgets.ICO_JUMP_TO_BOTTOM),
-                    color: #888,
-                    // TODO: once Makepad button support draw_icon hover/down animated states, reenable this.
-                    // color: #BBB,
-                    // color_hover: #000,
-                    // color_down: #000,
-                    // get_color: fn() -> vec4 {
-                    //     return mix(self.color, self.color_hover, self.hover)
-                    // }
-                },
-                icon_walk: Walk{width: 20, height: 20}
+                margin: {bottom: 8},
+                draw_icon: {svg_file: (ICO_JUMP_TO_BOTTOM)},
+                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
                 // draw a circular background for the button
-                draw_bg +: {
-                    background_color: #edededce,
-                    background_color_hover: #d0d0d0ce,
-                    pixel: fn() {
-                        let sdf = Sdf2d.viewport(self.pos * self.rect_size);
+                draw_bg: {
+                    instance background_color: #edededce,
+                    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(mix(self.background_color, self.background_color_hover, self.hover));
+                        sdf.fill_keep(self.background_color);
                         return sdf.result
                     }
                 }
                 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 {
-                visible: false,
+            unread_message_badge = <View> {
                 width: 25, height: 20,
-                align: Align { x: 0.5, y: 0.5 }
+                align: {
+                    x: 0.5,
+                    y: 0.5
+                }
+                visible: false,
                 flow: Overlay,
-
-                green_rounded_label := RoundedView {
+                green_rounded_label = <View> {
                     width: Fill,
                     height: Fill,
                     show_bg: true,
-                    draw_bg +: {
-                        color: instance(COLOR_UNREAD_BADGE_MESSAGES)
-                        border_radius: uniform(4.0)
+                    draw_bg: {
+                        color: (COLOR_UNREAD_BADGE_MESSAGES)
+                        instance border_radius: 4.0
                         // Adjust this border_size to larger value to make oval smaller 
-                        border_size: uniform(2.0)
-
-                        pixel: fn() {
-                            let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+                        instance border_size: 2.0
+                        fn pixel(self) -> vec4 {
+                            let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                             sdf.box(
                                 self.border_size,
                                 self.border_size,
@@ -86,14 +77,14 @@ script_mod! {
                     }
                 }
                 // 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: theme.font_regular {font_size: 8.0},
+                        text_style: {font_size: 8.0},
                     }
                 }
             }
@@ -103,19 +94,19 @@ script_mod! {
 }
 
 
-#[derive(ScriptHook, Script, Widget)]
+#[derive(LiveHook, Live, 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(cx, ids!(inner_button)).area();
+        let button_area = self.button(ids!(jump_to_bottom_button)).area();
         match event.hits(cx, button_area) {
             Hit::FingerHoverIn(_) | Hit::FingerLongPress(_) => {
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     TooltipAction::HoverIn {
                         text: "Jump to bottom".to_string(),
                         widget_rect: button_area.rect(cx),
@@ -128,7 +119,8 @@ impl Widget for JumpToBottomButton {
             }
             Hit::FingerHoverOut(_) => {
                 cx.widget_action(
-                    self.widget_uid(), 
+                    self.widget_uid(),
+                    &scope.path,
                     TooltipAction::HoverOut,
                 );
             }
@@ -155,7 +147,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(cx, ids!(unread_message_badge)).set_visible(cx, false);
+            self.view(ids!(unread_message_badge)).set_visible(cx, false);
         } else {
             self.visible = true;
         }
@@ -169,17 +161,17 @@ impl JumpToBottomButton {
         match count {
             UnreadMessageCount::Unknown => {
                 self.visible = true;
-                self.view(cx, ids!(unread_message_badge)).set_visible(cx, true);
-                self.label(cx, ids!(unread_messages_count)).set_text(cx, "");
+                self.view(ids!(unread_message_badge)).set_visible(cx, true);
+                self.label(ids!(unread_messages_count)).set_text(cx, "");
             }
             UnreadMessageCount::Known(0) => {
                 self.visible = false;
-                self.view(cx, ids!(unread_message_badge)).set_visible(cx, false);
-                self.label(cx, ids!(unread_messages_count)).set_text(cx, "");
+                self.view(ids!(unread_message_badge)).set_visible(cx, false);
+                self.label(ids!(unread_messages_count)).set_text(cx, "");
             }
             UnreadMessageCount::Known(unread_message_count) => {
                 self.visible = true;
-                self.view(cx, ids!(unread_message_badge)).set_visible(cx, true);
+                self.view(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 {
@@ -187,16 +179,18 @@ impl JumpToBottomButton {
                 } else {
                     (2.0, "")
                 };
-                self.label(cx, ids!(unread_messages_count)).set_text(
+                self.label(ids!(unread_messages_count)).set_text(
                     cx,
                     &format!("{}{plus_sign}", std::cmp::min(unread_message_count, 99))
                 );
-                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),
+                self.view(ids!(unread_message_badge.green_rounded_label)).apply_over(cx, live!{
+                    draw_bg: {
+                        border_size: (border_size),
+                    }
                 });
             }
         }
+
     }
 
     /// Updates the visibility of the jump to bottom button and the unread message badge
@@ -217,7 +211,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(cx, ids!(inner_button)).clicked(actions) {
+        if self.button(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 31c422935..ee5813917 100644
--- a/src/shared/mentionable_text_input.rs
+++ b/src/shared/mentionable_text_input.rs
@@ -1,42 +1,292 @@
-//! A temporary mock/placeholder for MentionableTextInput that uses a simple TextInput
-//! instead of the full @mention popup system (CommandTextInput).
+//! MentionableTextInput component provides text input with @mention capabilities
+//! Can be used in any context where user mentions are needed (message input, editing)
 //!
-//! This preserves the same external-facing API so that the real MentionableTextInput
-//! can be slotted back in later without changing the code that depends on it.
+use crate::avatar_cache::*;
+use crate::shared::avatar::AvatarWidgetRefExt;
+use crate::shared::bouncing_dots::BouncingDotsWidgetRefExt;
+use crate::shared::styles::COLOR_UNKNOWN_ROOM_AVATAR;
+use crate::utils;
 
-use makepad_widgets::*;
-use matrix_sdk::ruma::{
-    events::room::message::RoomMessageEventContent,
-    OwnedRoomId,
-};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+use makepad_widgets::{text::selection::Cursor, *};
+use matrix_sdk::ruma::{events::{room::message::RoomMessageEventContent, Mentions}, OwnedRoomId, OwnedUserId};
+use matrix_sdk::room::RoomMember;
+use std::collections::{BTreeMap, BTreeSet};
+use unicode_segmentation::UnicodeSegmentation;
+use crate::home::room_screen::RoomScreenProps;
 
-    mod.widgets.MentionableTextInput = #(MentionableTextInput::register_widget(vm)) {
+// 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;
+
+    pub FOCUS_HOVER_COLOR = #C
+    pub KEYBOARD_FOCUS_OR_COLOR_HOVER = #1C274C
+
+    // Template for user list items in the mention dropdown
+    UserListItem = <View> {
         width: Fill,
-        height: Fit
+        height: Fit,
+        margin: {left: 4, right: 4}
+        padding: {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);
+                // Draw rounded rectangle with configurable radius
+                sdf.box(0., 0., self.rect_size.x, self.rect_size.y, self.border_radius);
+
+                if self.selected > 0.0 {
+                    sdf.fill(KEYBOARD_FOCUS_OR_COLOR_HOVER)
+                } else if self.hover > 0.0 {
+                    sdf.fill(KEYBOARD_FOCUS_OR_COLOR_HOVER)
+                } else {
+                    // Default state
+                    sdf.fill(self.color)
+                }
+                return sdf.result
+            }
+        }
+        flow: Down
+        spacing: 2.0
+
+        user_info = <View> {
+            width: Fill,
+            height: Fit,
+            flow: Right,
+            spacing: 8.0
+            align: {y: 0.5}
+
+            avatar = <Avatar> {
+                width: 24,
+                height: 24,
+                text_view = { text = { draw_text: {
+                    text_style: { font_size: 12.0 }
+                }}}
+            }
+
+            username = <Label> {
+                height: Fit,
+                draw_text: {
+                    color: #000,
+                    text_style: {font_size: 14.0}
+                }
+            }
+
+            filler = <FillerX> {}
+        }
 
-        // Keep the same nested structure so that external DSL overrides
-        // (e.g., `persistent.center.text_input.empty_text`) still work.
-        persistent := RoundedView {
+        user_id = <Label> {
+            height: Fit,
+            draw_text: {
+                color: #666,
+                text_style: {font_size: 12.0}
+            }
+        }
+    }
+
+    // Template for the @room mention list item
+    RoomMentionListItem = <View> {
+        width: Fill,
+        height: Fit,
+        margin: {left: 4, right: 4}
+        padding: {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);
+                sdf.box(0., 0., self.rect_size.x, self.rect_size.y, self.border_radius);
+
+                if self.selected > 0.0 {
+                    sdf.fill(KEYBOARD_FOCUS_OR_COLOR_HOVER)
+                } else if self.hover > 0.0 {
+                    sdf.fill(KEYBOARD_FOCUS_OR_COLOR_HOVER)
+                } else {
+                    sdf.fill(self.color)
+                }
+                return sdf.result
+            }
+        }
+        flow: Down
+        spacing: 2.0
+        align: {y: 0.5}
+
+        user_info = <View> {
             width: Fill,
             height: Fit,
-            flow: Down,
-            top := View { height: 0 }
-            center := RoundedView {
-                width: Fill,
+            flow: Right,
+            spacing: 8.0
+            align: {y: 0.5}
+
+            room_avatar = <Avatar> {
+                width: 24,
+                height: 24,
+                text_view = { text = { draw_text: {
+                    text_style: { font_size: 12.0 }
+                }}}
+            }
+
+            room_mention = <Label> {
                 height: Fit,
-                text_input := RobrixTextInput {
+                draw_text: {
+                    color: #000,
+                    text_style: {font_size: 14.0}
+                }
+                text: "Notify the entire room"
+            }
+
+            filler = <FillerX> {}
+        }
+
+        room_user_id = <Label> {
+            height: Fit,
+            align: {y: 0.5},
+            draw_text: {
+                color: #666,
+                text_style: {font_size: 12.0}
+            }
+            text: "@room"
+        }
+    }
+
+    // Template for loading indicator when members are being fetched
+    LoadingIndicator = <View> {
+        width: Fill,
+        height: 48,
+        margin: {left: 4, right: 4}
+        padding: {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),
+        }
+
+        loading_text = <Label> {
+            height: Fit,
+            draw_text: {
+                color: #666,
+                text_style: {font_size: 14.0}
+            }
+            text: "Loading members"
+        }
+
+        loading_animation = <BouncingDots> {
+            width: 60,
+            height: 24,
+            draw_bg: {
+                color: (COLOR_ROBRIX_PURPLE),
+                dot_radius: 2.0,
+            }
+        }
+    }
+
+    // Template for no matches indicator when no users match the search
+    NoMatchesIndicator = <View> {
+        width: Fill,
+        height: 48,
+        margin: {left: 4, right: 4}
+        padding: {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),
+        }
+
+        no_matches_text = <Label> {
+            height: Fit,
+            draw_text: {
+                color: #666,
+                text_style: {font_size: 14.0}
+            }
+            text: "No matching users found"
+        }
+    }
+
+    pub MentionableTextInput = {{MentionableTextInput}}<CommandTextInput> {
+        width: Fill,
+        height: Fit
+        trigger: "@"
+        inline_search: true
+
+        color_focus: (FOCUS_HOVER_COLOR),
+        color_hover: (FOCUS_HOVER_COLOR),
+
+        popup = {
+            spacing: 0.0
+            padding: 0.0
+
+            draw_bg: {
+                color: (COLOR_SECONDARY),
+            }
+            header_view = {
+                margin: {left: 4, right: 4}
+                draw_bg: {
+                    color: (COLOR_ROBRIX_PURPLE),
+                }
+                header_label = {
+                    draw_text: {
+                        color: (COLOR_PRIMARY_DARKER),
+                    }
+                    text: "Users in this Room"
+                }
+            }
+
+            list = {
+                height: Fit
+                clip_y: true
+                spacing: 0.0
+                padding: 0.0
+            }
+        }
+
+        persistent = {
+            top = { height: 0 }
+            bottom = { height: 0 }
+            center = {
+                text_input = <RobrixTextInput> {
                     empty_text: "Start typing..."
                 }
             }
-            bottom := View { height: 0 }
         }
+
+        // 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> {}
     }
 }
 
+// /// A special string used to denote the start of a mention within
+// /// the actual text being edited.
+// /// This is used to help easily locate and distinguish actual mentions
+// /// from normal `@` characters.
+// const MENTION_START_STRING: &str = "\u{8288}@\u{8288}";
+
+
 #[derive(Debug)]
 pub enum MentionableTextInputAction {
     /// Notifies the MentionableTextInput about updated power levels for the room.
@@ -46,94 +296,920 @@ pub enum MentionableTextInputAction {
     }
 }
 
-/// Temporary mock widget that wraps a simple TextInput (RobrixTextInput)
-/// while preserving the same external API as the real MentionableTextInput.
-#[derive(Script, ScriptHook, Widget)]
+/// Widget that extends CommandTextInput with @mention capabilities
+#[derive(Live, LiveHook, Widget)]
 pub struct MentionableTextInput {
-    #[source] source: ScriptObjectRef,
-    #[deref] view: View,
-    /// Whether the current user can notify everyone in the room (@room mention).
-    /// Stored but not used in this mock; kept for API compatibility.
+    /// Base command text input
+    #[deref] cmd_text_input: CommandTextInput,
+    /// Template for user list items
+    #[live] user_list_item: Option<LivePtr>,
+    /// Template for the @room mention list item
+    #[live] room_mention_list_item: Option<LivePtr>,
+    /// Template for loading indicator
+    #[live] loading_indicator: Option<LivePtr>,
+    /// Template for no matches indicator
+    #[live] no_matches_indicator: Option<LivePtr>,
+    /// Position where the @ mention starts
+    #[rust] current_mention_start_index: Option<usize>,
+    /// The set of users that were mentioned (at one point) in this text input.
+    /// Due to characters being deleted/removed, this list is a *superset*
+    /// of possible users who may have been mentioned.
+    /// All of these mentions may not exist in the final text input content;
+    /// this is just a list of users to search the final sent message for
+    /// when adding in new mentions.
+    #[rust] possible_mentions: BTreeMap<OwnedUserId, String>,
+    /// Indicates if the `@room` option was explicitly selected.
+    #[rust] possible_room_mention: bool,
+    /// Indicates if currently in mention search mode
+    #[rust] is_searching: bool,
+    /// Whether the current user can notify everyone in the room (@room mention)
     #[rust] can_notify_room: bool,
+    /// Whether the room members are currently being loaded
+    #[rust] members_loading: bool,
 }
 
+
 impl Widget for MentionableTextInput {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        self.view.handle_event(cx, event, scope);
+        self.cmd_text_input.handle_event(cx, event, scope);
+
+        // Best practice: Always check Scope first to get current context
+        // Scope represents the current widget context as passed down from parents
+        let scope_room_id = scope.props.get::<RoomScreenProps>()
+            .expect("BUG: RoomScreenProps should be available in Scope::props for MentionableTextInput")
+            .room_name_id
+            .room_id()
+            .clone();
 
-        // Handle MentionableTextInputAction for API compatibility.
         if let Event::Actions(actions) = event {
+            let text_input_ref = self.cmd_text_input.text_input_ref();
+            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);
+
+            // Handle item selection from mention popup
+            if let Some(selected) = self.cmd_text_input.item_selected(actions) {
+                self.on_user_selected(cx, scope, selected);
+            }
+
+            // 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();
+                    self.update_user_list(cx, &search_text, scope);
+                } else if self.cmd_text_input.view(ids!(popup)).visible() {
+                    self.close_mention_popup(cx);
+                }
+            }
+
+            // Process all actions
             for action in actions {
-                if let Some(MentionableTextInputAction::PowerLevelsUpdated {
-                    can_notify_room, ..
-                }) = action.downcast_ref()
-                {
-                    self.can_notify_room = *can_notify_room;
+                // Handle TextInput changes
+                if let Some(widget_action) = action.as_widget_action() {
+                    if widget_action.widget_uid == text_input_uid {
+                        if let TextInputAction::Changed(text) = widget_action.cast() {
+                            if has_focus {
+                                self.handle_text_change(cx, scope, text.to_owned());
+                            }
+                            continue; // Continue processing other actions
+                        }
+                    }
+                }
+
+                // Handle MentionableTextInputAction actions
+                if let Some(MentionableTextInputAction::PowerLevelsUpdated { room_id, can_notify_room }) = action.downcast_ref() {
+                    if &scope_room_id != room_id {
+                        continue;
+                    }
+
+                    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();
+                            self.update_user_list(cx, &search_text, scope);
+                        } else {
+                            self.redraw(cx);
+                        }
+                    }
+                }
+            }
+
+            // Close popup if focus is lost
+            if !has_focus && self.cmd_text_input.view(ids!(popup)).visible() {
+                self.close_mention_popup(cx);
+            }
+        }
+
+        // Check if we were waiting for members and they're now available
+        if self.members_loading && self.is_searching {
+            let room_props = scope
+                .props
+                .get::<RoomScreenProps>()
+                .expect("RoomScreenProps should be available in scope");
+
+            if let Some(room_members) = &room_props.room_members {
+                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_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();
+                        self.update_user_list(cx, &search_text, scope);
+                    }
                 }
             }
         }
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.view.draw_walk(cx, scope, walk)
+        self.cmd_text_input.draw_walk(cx, scope, walk)
+    }
+}
+
+
+impl MentionableTextInput {
+
+    /// Check if members are loading and show loading indicator if needed.
+    ///
+    /// Returns true if we should return early because we're in the loading state.
+    fn handle_members_loading_state(
+        &mut self,
+        cx: &mut Cx,
+        room_members: &Option<std::sync::Arc<Vec<RoomMember>>>,
+    ) -> bool {
+        let Some(room_members) = room_members else {
+            self.members_loading = true;
+            self.show_loading_indicator(cx);
+            return true;
+        };
+
+        let members_are_empty = room_members.is_empty();
+
+        if members_are_empty && !self.members_loading {
+            // Members list is empty and we're not already showing loading - start loading state
+            self.members_loading = true;
+            self.show_loading_indicator(cx);
+            return true;
+        } 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;
+        }
+
+        false
+    }
+
+    /// Tries to add the `@room` mention item to the list of selectable popup mentions.
+    ///
+    /// Returns true if @room item was added to the list and will be displayed in the popup.
+    fn try_search_messages_mention_item(
+        &mut self,
+        cx: &mut Cx,
+        search_text: &str,
+        room_props: &RoomScreenProps,
+        is_desktop: bool,
+    ) -> bool {
+        if !self.can_notify_room || !("@room".contains(search_text) || search_text.is_empty()) {
+            return false;
+        }
+
+        let Some(ptr) = self.room_mention_list_item else { return false };
+        let room_mention_item = WidgetRef::new_from_ptr(cx, Some(ptr));
+        let mut room_avatar_shown = false;
+
+        let avatar_ref = room_mention_item.avatar(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();
+        let room_name_first_char = room_label
+            .graphemes(true)
+            .find(|g| *g != "#" && *g != "!" && *g != "@")
+            .map(|s| s.to_uppercase())
+            .filter(|s| s.chars().all(|c| c.is_alphabetic()))
+            .unwrap_or_else(|| "R".to_string());
+
+        if let Some(avatar_url) = &room_props.room_avatar_url {
+            match get_or_fetch_avatar(cx, avatar_url) {
+                AvatarCacheEntry::Loaded(avatar_data) => {
+                    // Display room avatar
+                    let result = avatar_ref.show_image(cx, None, |cx, img| {
+                        utils::load_png_or_jpg(&img, cx, &avatar_data)
+                    });
+                    if result.is_ok() {
+                        room_avatar_shown = true;
+                    } else {
+                        log!("Failed to show @room avatar with room avatar image");
+                    }
+                },
+                AvatarCacheEntry::Requested => {
+                    avatar_ref.show_text(cx, Some(COLOR_UNKNOWN_ROOM_AVATAR), None, &room_name_first_char);
+                    room_avatar_shown = true;
+                },
+                AvatarCacheEntry::Failed => {
+                    log!("Failed to load room avatar for @room");
+                }
+            }
+        }
+
+        // If unable to display room avatar, show first character of room name
+        if !room_avatar_shown {
+            avatar_ref.show_text(cx, Some(COLOR_UNKNOWN_ROOM_AVATAR), None, &room_name_first_char);
+        }
+
+        // Apply layout and height styling based on device type
+        let new_height = if is_desktop { DESKTOP_ITEM_HEIGHT } else { MOBILE_ITEM_HEIGHT };
+        if is_desktop {
+            room_mention_item.apply_over(cx, live! {
+                height: (new_height),
+                flow: Right,
+            });
+        } else {
+            room_mention_item.apply_over(cx, live! {
+                height: (new_height),
+                flow: Down,
+            });
+        }
+
+        self.cmd_text_input.add_item(room_mention_item);
+        true
+    }
+
+    /// Find and sort matching members based on search text
+    fn find_and_sort_matching_members(
+        &self,
+        search_text: &str,
+        room_members: &std::sync::Arc<Vec<RoomMember>>,
+        max_matched_members: usize,
+    ) -> Vec<(String, RoomMember)> {
+        let mut prioritized_members = Vec::new();
+
+        // Get current user ID to filter out self-mentions
+        let current_user_id = crate::sliding_sync::current_user_id();
+
+        for member in room_members.iter() {
+            if prioritized_members.len() >= max_matched_members {
+                break;
+            }
+
+            // Skip the current user - users should not be able to mention themselves
+            if let Some(ref current_id) = current_user_id {
+                if member.user_id() == current_id {
+                    continue;
+                }
+            }
+
+            // Check if this member matches the search text (including Matrix ID)
+            if self.user_matches_search(member, search_text) {
+                let display_name = member
+                    .display_name()
+                    .map(|n| n.to_string())
+                    .unwrap_or_else(|| member.user_id().to_string());
+
+                let priority = self.get_match_priority(member, search_text);
+                prioritized_members.push((priority, display_name, member.clone()));
+            }
+        }
+
+        // Sort by priority (lower number = higher priority)
+        prioritized_members.sort_by_key(|(priority, _, _)| *priority);
+
+        // Convert to the format expected by the rest of the code
+        prioritized_members
+            .into_iter()
+            .map(|(_, display_name, member)| (display_name, member))
+            .collect()
+    }
+
+    /// Add user mention items to the list
+    /// Returns the number of items added
+    fn add_user_mention_items(
+        &mut self,
+        cx: &mut Cx,
+        matched_members: Vec<(String, RoomMember)>,
+        user_items_limit: usize,
+        is_desktop: bool,
+    ) -> usize {
+        let mut items_added = 0;
+
+        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));
+
+            item.label(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);
+
+            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);
+            } 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 avatar = item.avatar(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) => {
+                        let _ = avatar.show_image(cx, None, |cx, img| {
+                            utils::load_png_or_jpg(&img, cx, &avatar_data)
+                        });
+                    }
+                    AvatarCacheEntry::Requested | AvatarCacheEntry::Failed => {
+                        avatar.show_text(cx, None, None, &display_name);
+                    }
+                }
+            } else {
+                avatar.show_text(cx, None, None, &display_name);
+            }
+
+            self.cmd_text_input.add_item(item.clone());
+            items_added += 1;
+
+            // Set keyboard focus to the first item
+            if index == 0 {
+                // If @room exists, it's index 0, otherwise first user is index 0
+                self.cmd_text_input.set_keyboard_focus_index(0);
+            }
+        }
+
+        items_added
+    }
+
+    /// 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));
+
+        if has_items {
+            popup.set_visible(cx, true);
+            if self.is_searching {
+                self.cmd_text_input.text_input_ref().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);
+        } else {
+            // Only hide popup if we're not actively searching
+            popup.apply_over(cx, live! { height: Fit });
+            popup.set_visible(cx, false);
+        }
+    }
+
+    /// Handles item selection from mention popup (either user or @room)
+    fn on_user_selected(&mut self, cx: &mut Cx, _scope: &mut Scope, selected: WidgetRef) {
+        // Note: We receive scope as parameter but don't use it in this method
+        // 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 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_text = room_mention_label.text();
+            let room_user_id_text = selected.label(ids!(room_user_id)).text();
+
+            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
+                self.possible_room_mention = true;
+                "@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 Ok(user_id): Result<OwnedUserId, _> = user_id_str.clone().try_into() else {
+                    log!("Failed to parse user_id: {}", user_id_str);
+                    return;
+                };
+                self.possible_mentions.insert(user_id.clone(), username.clone());
+
+                // Currently, we directly insert the markdown link for user mentions
+                // instead of the user's display name, because we don't yet have a way
+                // to track mentioned display names and replace them later.
+                format!(
+                    "[{username}]({}) ",
+                    user_id.matrix_to_uri(),
+                )
+            };
+
+
+            // Use utility function to safely replace text
+            let new_text = utils::safe_replace_by_byte_indices(
+                &current_text,
+                start_idx,
+                head,
+                &mention_to_insert,
+            );
+
+            self.cmd_text_input.set_text(cx, &new_text);
+            // Calculate new cursor position
+            let new_pos = start_idx + mention_to_insert.len();
+            text_input_ref.set_cursor(cx, Cursor { index: new_pos, prefer_next_row: false }, false);
+
+        }
+
+        self.is_searching = false;
+        self.current_mention_start_index = None;
+        self.close_mention_popup(cx);
+    }
+
+    /// Core text change handler that manages mention context
+    fn handle_text_change(&mut self, cx: &mut Cx, scope: &mut Scope, text: String) {
+        // Check if text is empty or contains only whitespace
+        let trimmed_text = text.trim();
+        if trimmed_text.is_empty() {
+            self.possible_mentions.clear();
+            self.possible_room_mention = false;
+            if self.is_searching {
+                self.close_mention_popup(cx);
+            }
+            return;
+        }
+
+        let cursor_pos = self.cmd_text_input.text_input_ref().borrow().map_or(0, |p| p.cursor().index);
+
+        // Check if we're currently searching and the @ symbol was deleted
+        if self.is_searching {
+            if let Some(start_pos) = self.current_mention_start_index {
+                // Check if the @ symbol at the start position still exists
+                if start_pos >= text.len() || text.get(start_pos..start_pos+1).is_some_and(|c| c != "@") {
+                    // The @ symbol was deleted, stop searching
+                    self.close_mention_popup(cx);
+                    return;
+                }
+            }
+        }
+
+        // Look for trigger position for @ menu
+        if let Some(trigger_pos) = self.find_mention_trigger_position(&text, cursor_pos) {
+            self.current_mention_start_index = Some(trigger_pos);
+            self.is_searching = true;
+
+            let search_text = utils::safe_substring_by_byte_indices(
+                &text,
+                trigger_pos + 1,
+                cursor_pos
+            ).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));
+            header_view.set_visible(cx, true);
+
+            self.update_user_list(cx, &search_text, scope);
+            popup.set_visible(cx, true);
+        } else if self.is_searching {
+            self.close_mention_popup(cx);
+        }
+    }
+
+    /// Updates the mention suggestion list based on search
+    fn update_user_list(&mut self, cx: &mut Cx, search_text: &str, scope: &mut Scope) {
+        // 1. Get Props from Scope
+        let room_props = scope.props.get::<RoomScreenProps>()
+            .expect("RoomScreenProps should be available in scope for MentionableTextInput");
+
+        // 2. Check if members are loading and handle loading state
+        if self.handle_members_loading_state(cx, &room_props.room_members) {
+            return;
+        }
+
+        // 3. Get room members (we know they exist because handle_members_loading_state returned false)
+        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();
+
+        if !self.is_searching {
+            return;
+        }
+
+        let is_desktop = cx.display_context.is_desktop();
+        let max_visible_items = if is_desktop { 10 } else { 5 };
+        let mut items_added = 0;
+
+        // 4. Try to add @room mention item
+        let has_room_item = self.try_search_messages_mention_item(cx, search_text, room_props, is_desktop);
+        if has_room_item {
+            items_added += 1;
+        }
+
+        // 5. Find and sort matching members
+        let max_matched_members = max_visible_items * 2;  // Buffer for better UX
+        let matched_members = self.find_and_sort_matching_members(search_text, room_members, max_matched_members);
+
+        // 6. Add user mention items
+        let user_items_limit = max_visible_items.saturating_sub(has_room_item as usize);
+        let user_items_added = self.add_user_mention_items(cx, matched_members, user_items_limit, is_desktop);
+        items_added += user_items_added;
+
+        // 7. Update popup visibility based on whether we have items
+        self.update_popup_visibility(cx, items_added > 0);
+    }
+
+    /// Detects valid mention trigger positions in text
+    fn find_mention_trigger_position(&self, text: &str, cursor_pos: usize) -> Option<usize> {
+        if cursor_pos == 0 {
+            return None;
+        }
+
+        // Use utility function to convert byte position to grapheme index
+        let cursor_grapheme_idx = utils::byte_index_to_grapheme_index(text, cursor_pos);
+        let text_graphemes: Vec<&str> = text.graphemes(true).collect();
+
+        // Build byte position mapping to facilitate conversion back to byte positions
+        let byte_positions = utils::build_grapheme_byte_positions(text);
+
+        // Simple logic: trigger when cursor is immediately after @ symbol
+        // Only trigger if @ is preceded by whitespace or beginning of text
+        if cursor_grapheme_idx > 0 && text_graphemes.get(cursor_grapheme_idx - 1) == Some(&"@") {
+            let is_preceded_by_whitespace_or_start = cursor_grapheme_idx == 1 ||
+                (cursor_grapheme_idx > 1 && text_graphemes.get(cursor_grapheme_idx - 2).is_some_and(|g| g.trim().is_empty()));
+            if is_preceded_by_whitespace_or_start {
+                if let Some(&byte_pos) = byte_positions.get(cursor_grapheme_idx - 1) {
+                    return Some(byte_pos);
+                }
+            }
+        }
+
+        // Find the last @ symbol before the cursor for search continuation
+        // Only continue if we're already in search mode
+        if self.is_searching {
+            let last_at_pos = text_graphemes.get(..cursor_grapheme_idx)
+                .and_then(|slice| slice.iter()
+                    .enumerate()
+                    .filter(|(_, g)| **g == "@")
+                    .map(|(i, _)| i)
+                    .next_back());
+
+            if let Some(at_idx) = last_at_pos {
+                // Get the byte position of this @ symbol
+                let &at_byte_pos = byte_positions.get(at_idx)?;
+
+                // Extract the text after the @ symbol up to the cursor position
+                let mention_text = text_graphemes.get(at_idx + 1..cursor_grapheme_idx)
+                    .unwrap_or(&[]);
+
+                // Only trigger if this looks like an ongoing mention (contains only alphanumeric and basic chars)
+                if self.is_valid_mention_text(mention_text) {
+                    return Some(at_byte_pos);
+                }
+            }
+        }
+
+        None
+    }
+
+    /// Simple validation for mention text
+    fn is_valid_mention_text(&self, graphemes: &[&str]) -> bool {
+        // Allow empty text (for @)
+        if graphemes.is_empty() {
+            return true;
+        }
+
+        // Check if it contains newline characters
+        !graphemes.iter().any(|g| g.contains('\n'))
+    }
+
+    /// Helper function to check if a user matches the search text
+    /// Checks both display name and Matrix ID for matching
+    fn user_matches_search(&self, member: &RoomMember, search_text: &str) -> bool {
+        let search_text_lower = search_text.to_lowercase();
+
+        // Check display name
+        let display_name = member
+            .display_name()
+            .map(|n| n.to_string())
+            .unwrap_or_else(|| member.user_id().to_string());
+
+        let display_name_lower = display_name.to_lowercase();
+        if display_name_lower.contains(&search_text_lower) {
+            return true;
+        }
+
+        // Only match against the localpart (e.g., "mihran" from "@mihran:matrix.org")
+        // Don't match against the homeserver part to avoid false matches
+        let localpart = member.user_id().localpart();
+        let localpart_lower = localpart.to_lowercase();
+        if localpart_lower.contains(&search_text_lower) {
+            return true;
+        }
+
+        false
+    }
+
+    /// Helper function to determine match priority for sorting
+    /// Lower values = higher priority (better matches shown first)
+    fn get_match_priority(&self, member: &RoomMember, search_text: &str) -> u8 {
+        let search_text_lower = search_text.to_lowercase();
+
+        let display_name = member
+            .display_name()
+            .map(|n| n.to_string())
+            .unwrap_or_else(|| member.user_id().to_string());
+
+        let display_name_lower = display_name.to_lowercase();
+        let localpart = member.user_id().localpart();
+        let localpart_lower = localpart.to_lowercase();
+
+        // Priority 0: Exact case-sensitive match (highest priority)
+        if display_name == search_text || localpart == search_text {
+            return 0;
+        }
+
+        // Priority 1: Exact match (case-insensitive)
+        if display_name_lower == search_text_lower || localpart_lower == search_text_lower {
+            return 1;
+        }
+
+        // Priority 2: Case-sensitive prefix match
+        if display_name.starts_with(search_text) || localpart.starts_with(search_text) {
+            return 2;
+        }
+
+        // Priority 3: Display name starts with search text (case-insensitive)
+        if display_name_lower.starts_with(&search_text_lower) {
+            return 3;
+        }
+
+        // Priority 4: Localpart starts with search text (case-insensitive)
+        if localpart_lower.starts_with(&search_text_lower) {
+            return 4;
+        }
+
+        // Priority 5: Display name contains search text at word boundary
+        if let Some(pos) = display_name_lower.find(&search_text_lower) {
+            // Check if it's at the start of a word (preceded by space or at start)
+            if pos == 0 || display_name_lower.chars().nth(pos - 1) == Some(' ') {
+                return 5;
+            }
+        }
+
+        // Priority 6: Localpart contains search text at word boundary
+        if let Some(pos) = localpart_lower.find(&search_text_lower) {
+            // Check if it's at the start of a word (preceded by non-alphanumeric or at start)
+            if pos == 0 || !localpart_lower.chars().nth(pos - 1).unwrap_or('a').is_alphanumeric() {
+                return 6;
+            }
+        }
+
+        // Priority 7: Display name contains search text (anywhere)
+        if display_name_lower.contains(&search_text_lower) {
+            return 7;
+        }
+
+        // Priority 8: Localpart contains search text (anywhere)
+        if localpart_lower.contains(&search_text_lower) {
+            return 8;
+        }
+
+        // Should not reach here if user_matches_search returned true
+        u8::MAX
     }
 
-    fn text(&self) -> String {
-        self.child_by_path(ids!(text_input)).as_text_input().text()
+    /// 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();
+
+        // Create loading indicator widget
+        let Some(ptr) = self.loading_indicator else { return };
+        let loading_item = WidgetRef::new_from_ptr(cx, Some(ptr));
+
+        // Start the loading animation
+        loading_item.bouncing_dots(ids!(loading_animation)).start_animation(cx);
+
+        // Add the loading indicator to the popup
+        self.cmd_text_input.add_item(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));
+
+        // 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 }
+        popup.set_visible(cx, true);
+
+        // Maintain text input focus
+        if self.is_searching {
+            self.cmd_text_input.text_input_ref().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();
+
+        // 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));
+
+        // Add the no matches indicator to the popup
+        self.cmd_text_input.add_item(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));
+
+        // Ensure header is visible
+        header_view.set_visible(cx, true);
+
+        // Let popup auto-size based on content
+        popup.apply_over(cx, live! { height: Fit });
+
+        // Maintain text input focus so user can continue typing
+        if self.is_searching {
+            self.cmd_text_input.text_input_ref().set_key_focus(cx);
+        }
     }
 
-    fn set_text(&mut self, cx: &mut Cx, text: &str) {
-        self.text_input(cx, ids!(persistent.center.text_input)).set_text(cx, text);
+    /// Cleanup helper for closing mention popup
+    fn close_mention_popup(&mut self, cx: &mut Cx) {
+        self.current_mention_start_index = None;
+        self.is_searching = false;
+        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();
+
+        // 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));
+
+        // Force hide header view - necessary when handling deletion operations
+        // When backspace-deleting mentions, we want to completely hide the header
+        header_view.set_visible(cx, false);
+
+        // Hide the entire popup
+        popup.set_visible(cx, false);
+
+        // Reset popup height
+        popup.apply_over(cx, live! { height: Fit });
+
+        // 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
+
+        self.cmd_text_input.request_text_input_focus();
         self.redraw(cx);
     }
 
-    fn set_key_focus(&self, cx: &mut Cx) {
-        self.text_input(cx, ids!(persistent.center.text_input)).set_key_focus(cx);
+    /// Returns the current text content
+    pub fn text(&self) -> String {
+        self.cmd_text_input.text_input_ref().text()
     }
-}
 
-impl MentionableTextInput {
+    /// 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.redraw(cx);
+    }
+
+
 
-    /// Sets whether the current user can notify the entire room (@room mention).
+
+    /// Sets whether the current user can notify the entire room (@room mention)
     pub fn set_can_notify_room(&mut self, can_notify: bool) {
         self.can_notify_room = can_notify;
     }
 
-    /// Gets whether the current user can notify the entire room (@room mention).
+    /// Gets whether the current user can notify the entire room (@room mention)
     pub fn can_notify_room(&self) -> bool {
         self.can_notify_room
     }
+
+
 }
 
 impl MentionableTextInputRef {
+    pub fn text(&self) -> String {
+        self.borrow().map_or_else(String::new, |inner| inner.text())
+    }
+
     /// Returns a reference to the inner `TextInput` widget.
     pub fn text_input_ref(&self) -> TextInputRef {
-        self.child_by_path(ids!(persistent.center.text_input)).as_text_input()
+        self.borrow()
+            .map(|inner| inner.cmd_text_input.text_input_ref())
+            .unwrap_or_default()
     }
 
-    /// Sets whether the current user can notify the entire room (@room mention).
+    pub fn set_text(&self, cx: &mut Cx, text: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_text(cx, text);
+        }
+    }
+
+
+    /// Sets whether the current user can notify the entire room (@room mention)
     pub fn set_can_notify_room(&self, can_notify: bool) {
         if let Some(mut inner) = self.borrow_mut() {
             inner.set_can_notify_room(can_notify);
         }
     }
 
-    /// Gets whether the current user can notify the entire room (@room mention).
+    /// Gets whether the current user can notify the entire room (@room mention)
     pub fn can_notify_room(&self) -> bool {
         self.borrow().is_some_and(|inner| inner.can_notify_room())
     }
 
-    /// Creates a message from the entered text.
-    ///
-    /// This mock version handles `/html` and `/plain` prefixes
-    /// but does not track or extract @mentions (since the mention popup is disabled).
+
+    /// Returns the mentions actually present in the given html message content.
+    fn get_real_mentions_in_html_text(&self, html: &str) -> Mentions {
+        let mut mentions = Mentions::new();
+
+        let Some(inner) = self.borrow() else {
+            return mentions;
+        };
+
+        let mut user_ids = BTreeSet::new();
+
+        for (user_id, username) in &inner.possible_mentions {
+            if html.contains(&format!(
+                "<a href=\"{}\">{}</a>",
+                user_id.matrix_to_uri(),
+                username,
+            )) {
+                user_ids.insert(user_id.clone());
+            }
+        }
+
+        mentions.user_ids = user_ids;
+        // Check for @room mention in HTML content
+        mentions.room = inner.possible_room_mention && html.contains("@room");
+        mentions
+    }
+
+    /// Returns the mentions actually present in the given markdown message content.
+    fn get_real_mentions_in_markdown_text(&self, markdown: &str) -> Mentions {
+        let mut mentions = Mentions::new();
+
+        let Some(inner) = self.borrow() else {
+            return mentions;
+        };
+
+        let mut user_ids = BTreeSet::new();
+        for (user_id, username) in &inner.possible_mentions {
+            // Check both username format and user_id format for flexibility
+            let username_pattern = format!("[{}]({})", username, user_id.matrix_to_uri());
+            let userid_pattern = format!("[{}]({})", user_id, user_id.matrix_to_uri());
+
+            if markdown.contains(&username_pattern) || markdown.contains(&userid_pattern) {
+                user_ids.insert(user_id.clone());
+            }
+        }
+
+        mentions.user_ids = user_ids;
+        // Check for @room mention in markdown content
+        mentions.room = inner.possible_room_mention && markdown.contains("@room");
+        mentions
+    }
+
+    /// Processes entered text and creates a message with mentions based on detected message type.
+    /// This method handles /html, /plain prefixes and defaults to markdown.
     pub fn create_message_with_mentions(&self, entered_text: &str) -> RoomMessageEventContent {
         if let Some(html_text) = entered_text.strip_prefix("/html") {
-            RoomMessageEventContent::text_html(html_text, html_text)
+            let message = RoomMessageEventContent::text_html(html_text, html_text);
+            message.add_mentions(self.get_real_mentions_in_html_text(html_text))
         } else if let Some(plain_text) = entered_text.strip_prefix("/plain") {
+            // Plain text messages don't support mentions
             RoomMessageEventContent::text_plain(plain_text)
         } else {
-            RoomMessageEventContent::text_markdown(entered_text)
+            let message = RoomMessageEventContent::text_markdown(entered_text);
+            message.add_mentions(self.get_real_mentions_in_markdown_text(entered_text))
         }
     }
+
 }
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index a92a81fd9..0a8395674 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -1,8 +1,8 @@
-use makepad_widgets::ScriptVm;
+use makepad_widgets::Cx;
 
 pub mod avatar;
+pub mod callout_tooltip;
 pub mod collapsible_header;
-pub mod expand_arrow;
 pub mod confirmation_modal;
 pub mod helpers;
 pub mod html_or_plaintext;
@@ -15,33 +15,31 @@ 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 script_mod(vm: &mut ScriptVm) {
+pub fn live_design(cx: &mut Cx) {
     // Order matters here, as some widget definitions depend on others.
-    styles::script_mod(vm);
-    helpers::script_mod(vm);
-    icon_button::script_mod(vm);
-    expand_arrow::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);
+    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);
 }
diff --git a/src/shared/popup_list.rs b/src/shared/popup_list.rs
index e0838aaf0..ae073fce5 100644
--- a/src/shared/popup_list.rs
+++ b/src/shared/popup_list.rs
@@ -1,9 +1,17 @@
 use std::borrow::Cow;
 use crossbeam_queue::SegQueue;
 use makepad_widgets::*;
-use crate::{LivePtr, view_from_live_ptr};
 
-static PENDING_POPUP_NOTIFICATIONS: SegQueue<PopupItem> = SegQueue::new();
+use crate::shared::styles::*;
+
+static POPUP_NOTIFICATION: SegQueue<PopupItem> = SegQueue::new();
+const POPUP_KINDS: [(PopupKind, Vec4); 4] = [
+    (PopupKind::Error, COLOR_FG_DANGER_RED),
+    (PopupKind::Info, COLOR_INFO_BLUE),
+    (PopupKind::Success, COLOR_FG_ACCEPT_GREEN),
+    (PopupKind::Warning, COLOR_WARNING_YELLOW),
+];
+const ICON_SET: &[&[LiveId]] = ids_array!(error_icon, info_icon, success_icon, warning_icon,);
 
 /// Displays a new popup notification with a popup item.
 ///
@@ -25,7 +33,7 @@ pub fn enqueue_popup_notification(
     popup_item.auto_dismissal_duration = popup_item
         .auto_dismissal_duration
         .map(|duration| duration.min(3. * 60.));
-    PENDING_POPUP_NOTIFICATIONS.push(popup_item);
+    POPUP_NOTIFICATION.push(popup_item);
     SignalToUI::set_ui_signal();
 }
 
@@ -47,12 +55,12 @@ 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(cx, ids!(popup_notification)),
+        parent_ref.robrix_popup_notification(ids!(popup_notification)),
     );
 }
 
 /// Kind of a popup notification.
-#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
 pub enum PopupKind {
     /// Shows no icon at all.
     #[default]
@@ -80,32 +88,76 @@ pub struct PopupItem {
     pub kind: PopupKind,
 }
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
-    mod.widgets.ProgressBar = 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),
+                color: #ffffff,
+            }
+            icon_walk: { width: 22, height: 22 }
+        }
+    }
+    ForbiddenIcon = <CheckIcon> {
+        <Icon> {
+            draw_icon: {
+                svg_file: (ICON_FORBIDDEN),
+                color: #ffffff,
+            }
+            icon_walk: { width: 22, height: 22 }
+        }
+    }
+    InfoIcon = <CheckIcon> {
+        <Icon> {
+            draw_icon: {
+                svg_file: (ICON_INFO),
+                color: #ffffff,
+            }
+            icon_walk: { width: 22, height: 22 }
+        }
+    }
+    WarningIcon = <CheckIcon> {
+        <Icon> {
+            draw_icon: {
+                svg_file: (ICON_WARNING),
+                color: #ffffff,
+            }
+            icon_walk: { width: 22, height: 22 }
+        }
+    }
+    ProgressBar = <View> {
         width: Fill,
         height: 10,
         show_bg: true,
-        margin: Inset{ bottom: 0 },
+        margin: { bottom: 0 },
         padding: 0,
-        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: instance(1.0)
-            // Display progress bar even when progress.on is off.
-            // 0.0 animate according to anim_time, 1.0 displays an oscillating progress bar.
-            debug_progress_bar: uniform(0.0),
-            anim_time: instance(0.0),
-            pixel: fn() {
-                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
+        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.
+            // 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);
                 let rect_size = self.rect_size;
-                let is_debug = step(0.5, self.debug_progress_bar);
-                let time = (1.0 - is_debug) * self.anim_time + is_debug * (0.5 + 0.5 * sin(self.draw_pass.time * PI));
+                let time = self.anim_time / self.anim_duration;
+                if self.debug_progress_bar > 0.5 {
+                    time = sin(self.time * PI)
+                }
                 if self.display_progress_bar > 0.5 {
                     if self.direction > 0.5 {
                         // Top to bottom
@@ -131,107 +183,77 @@ script_mod! {
                 return sdf.result
             }
         }
-        animator: Animator{
-            progress: {
-                default: @off
-                off: AnimatorState{
-                    redraw: true
-                    from: {all: Snap}
-                    apply: {
-                        draw_bg: {anim_time: 0.0}
-                    }
-                }
-                on: AnimatorState{
-                    redraw: true
-                    from: {all: Forward {duration: 1.0}}
-                    apply: {
-                        draw_bg: {anim_time: 1.0}
-                    }
-                }
-            }
-        }
     }
-    mod.widgets.MainContent = View {
+    MainContent = <View> {
         width: Fill,
         height: Fit,
-        align: Align{ x: 0.0, y: 0.5 }
-        padding: Inset{left: 0, top: 0, bottom: 10, right: 5}
-        popup_label := Label {
+        align: { x: 0.0, y: 0.5 }
+        padding: {left: 0, top: 0, bottom: 10, right: 5}
+        popup_label = <Label> {
             width: Fill,
             height: Fit,
-            draw_text +: {
-                color: #000
-                text_style: mod.widgets.MESSAGE_TEXT_STYLE { font_size: 10.5 },
+            draw_text: {
+                color: (#000000),
+                text_style: <MESSAGE_TEXT_STYLE>{ font_size: 10 },
+                wrap: Word
             }
         }
     }
-    mod.widgets.LeftSideView = View {
+    LeftSideView = <View> {
         width: Fit,
         height: Fit,
-        visible: false,
-        popup_icon := Icon {
-            width: 28,
-            height: 28,
-            draw_icon +: {
-                svg: (ICON_CHECKMARK),
-                color: (COLOR_PRIMARY),
-            }
-            icon_walk: Walk{ width: 22, height: 22 }
-        }
+        success_icon = <CheckIcon> {}
+        error_icon = <ForbiddenIcon> {}
+        info_icon = <InfoIcon> {}
+        warning_icon = <WarningIcon> {}
     }
-
-    mod.widgets.PopupCloseButton = ButtonFlat {
-        width: 32,
-        height: 32,
-        text: "",
-        spacing: 0,
-        margin: 0,
-        padding: 0,
-        align: Align{ x: 0.5, y: 0.5 }
-        label_walk: Walk{ width: 0, height: 0 }
-        icon_walk: Walk{ width: 14, height: 14, margin: 0 }
-        draw_bg +: {
-            border_radius: 4.0
-            border_size: 1.0
-            color: #00000014
-            color_hover: #00000022
-            color_down: #x0000002E
-            border_color: #00000020
-            border_color_hover: #0000002C
-            border_color_down: #00000038
-        }
-        draw_icon +: {
-            svg: (ICON_CLOSE),
-            color: #000000D0,
-        }
-    }
-
-    mod.widgets.CloseButtonView = View {
+    CloseButtonView = <View> {
         width: Fill,
         height: Fit,
         flow: Down,
-        padding: Inset{ top: 5, right: 5 }
-        align: Align{ x: 1.0 }
-
-        close_button := mod.widgets.PopupCloseButton {}
+        padding: { top: 3 }
+        align: { x: 0.98 }
+
+        <RoundedView> {
+            width: Fit, height: Fit
+            show_bg: true,
+            draw_bg: {
+                color: (COLOR_BG_DISABLED)
+            }
+            align: { x: 0.5, y: 0.5 }
+            // The "X" close button on the top right
+            close_button = <RobrixIconButton> {
+                width: Fit, height: Fit,
+                padding: { top: 5, bottom: 5, left: 8, right: 8 },
+                spacing: 0,
+                align: { x: 0.5, y: 0.5 }
+                draw_bg: {
+                    color: (COLOR_BG_DISABLED)
+                }
+                draw_icon: {
+                    svg_file: (ICON_CLOSE),
+                    color: (COLOR_DIVIDER_DARK),
+                }
+                icon_walk: {width: 15, height: 15}
+            }
+        }
     }
-
     // Other possible color themes that is not too glaring.
     // COLOR_POPUP_GREEN = #43bb9e;
     // COLOR_POPUP_RED = #e74c3c;
-    mod.widgets.PopupDialogRightToLeftProgress = RoundedView {
+    PopupDialogRightToLeftProgress = <RoundedView> {
         width: 275
         height: Fit
         padding: 0,
         flow: Overlay
         show_bg: true,
-        draw_bg +: {
-            border_radius: uniform(4.0)
-            border_color: instance(#000000)
-            border_size: uniform(2.0)
-            color: instance(#ffffff)
-            pixel: fn() {
-                let sdf = Sdf2d.viewport(self.pos * self.rect_size);
+        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);
                 sdf.box(
                     1.,
                     1.,
@@ -239,10 +261,10 @@ script_mod! {
                     self.rect_size.y - 2.0,
                     self.border_radius
                 )
-                sdf.fill_keep(self.color)
+                sdf.fill_keep(self.background_color)
 
                 // Only draw black border for white background (blank popups)
-                if length(self.color.rgb - vec3(1.0, 1.0, 1.0)) < 0.1 {
+                if length(self.background_color.rgb - vec3(1.0, 1.0, 1.0)) < 0.1 {
                     sdf.stroke(
                         self.border_color,
                         self.border_size
@@ -252,325 +274,315 @@ script_mod! {
             }
         }
 
-        popup_content := View {
+        popup_content = <View> {
             width: Fill, height: Fit,
             flow: Down
             //Right side view with close button
-            close_button_view := mod.widgets.CloseButtonView {}
-            padding: Inset{ right: 2, top: 2}
-            inner := View {
+            close_button_view = <CloseButtonView> {}
+            padding: { right: 2, top: 2}
+            inner = <View> {
                 width: Fill, height: Fit,
-                padding: Inset{ top: 0, right: 5, bottom: 0, left: 10 }
+                padding: { top: 0, right: 5, bottom: 0, left: 10 }
                 flow: Right,
-                align: Align{
+                align: {
                     y: 0,
                 }
                 // Left side with icon for popup kind.
-                left_side_view := mod.widgets.LeftSideView {}
+                <LeftSideView> {}
                 // Main content area
-                main_content := mod.widgets.MainContent {}
+                main_content = <MainContent> {}
             }
-            progress_bar := mod.widgets.ProgressBar {}
+            progress_bar = <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,
+                    from: {all: Forward {duration: 0.0}}
+                    apply: {
+                        popup_content = {
+                            progress_bar = {
+                                draw_bg: {anim_time: 0.0}
+                            }
+                        }
+                    }
+                }
+                slide = {
+                    redraw: true,
+                    // Maximum auto dismissal duration is 3 minutes.
+                    from: {all: Forward {duration: 180.0}}
+                    apply: {
+                        popup_content = {
+                            progress_bar = {
+                                draw_bg: {anim_time: 180.0}
+                            }
+                        }
+                    }
+                }
+            }
+            hover = {
+                default: off
+                off = {
+                    apply: { }
+                }
+                on = {
+                    apply: { }
+                }
+            }
+            down = {
+                default: off
+                off = {
+                    apply: { }
+                }
+                on = {
+                    apply: { }
+                }
+            }
+        }
     }
-    mod.widgets.PopupDialogTopToBottomProgress = mod.widgets.PopupDialogRightToLeftProgress {
-        popup_content := View {
+    PopupDialogTopToBottomProgress = <PopupDialogRightToLeftProgress> {
+        popup_content = <View> {
             width: Fill,
             height: Fit,
             flow: Right,
             spacing: 0,
-            align: Align{ x: 0.0, y: 0.5 }
+            align: { x: 0.0, y: 0.5 }
             // Left side with for popup kind.
-            left_side_view := mod.widgets.LeftSideView {
+            <LeftSideView> {
                 height: Fit,
-                margin: Inset{left: 10 }
+                margin: {left: 10 }
                 spacing: 0,
             }
-            inner := View {
+            inner = <View> {
                 width: 230,
                 height: Fit,
                 padding: 0,
                 flow: Down,
-                close_button_view := mod.widgets.CloseButtonView {}
+                close_button_view = <CloseButtonView> {}
                 // Main content area
-                main_content := mod.widgets.MainContent {
-                    padding: Inset{left: 0}
+                main_content = <MainContent> {
+                    padding: {left: 0}
                 }
             }
-            progress_bar := mod.widgets.ProgressBar {
+            progress_bar = <ProgressBar> {
                 width: 10,
                 height: Fill,
-                draw_bg +: {
-                    direction: 1.0,
-                    border_radius: 2.0,
+                draw_bg: {
+                    uniform direction: 1.0,
+                    uniform anim_time: 1.0,
+                    uniform border_radius: 2.,
                 }
             }
         }
     }
-
-    mod.widgets.RobrixPopupNotificationRightToLeftProgress = set_type_default() do #(RobrixPopupNotification::register_widget(vm)) {
-        ..mod.widgets.SolidView
-
+    pub RobrixPopupNotificationRightToLeftProgress = {{RobrixPopupNotification}} {
         width: 275
         height: Fit
         flow: Down
-        draw_bg +: {
-            color: (COLOR_TRANSPARENT)
+        draw_bg: {
+            fn pixel(self) -> vec4 {
+                return vec4(0., 0., 0., 0.0)
+            }
         }
-        content: mod.widgets.PopupDialogRightToLeftProgress {}
+        content: <PopupDialogRightToLeftProgress> {}
     }
-
-    mod.widgets.RobrixPopupNotificationTopToBottomProgress = mod.widgets.RobrixPopupNotificationRightToLeftProgress {
-        content: mod.widgets.PopupDialogTopToBottomProgress {}
+    pub RobrixPopupNotificationTopToBottomProgress = <RobrixPopupNotificationRightToLeftProgress> {
+        content: <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.
-    mod.widgets.PopupList = View {
+    pub PopupList = <View> {
         width: Fill,
         height: Fill,
-        margin: Inset{ top: 10 }
-        align: Align{x: 0.99, }
-        popup_notification := mod.widgets.RobrixPopupNotificationRightToLeftProgress {}
+        margin: { top: 10 }
+        align: {x: 0.99, }
+        popup_notification = <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.
-    mod.widgets.PopupListTopToBottomProgress = mod.widgets.PopupList {
-        popup_notification := mod.widgets.RobrixPopupNotificationTopToBottomProgress {}
+    pub PopupListTopToBottomProgress = <PopupList> {
+        popup_notification = <RobrixPopupNotificationTopToBottomProgress>{}
     }
 }
 
 /// A widget that displays a vertical list of popups.
-struct PopupEntry {
-    view: View,
-    close_timer: Timer,
-}
-
-/// A widget that displays a vertical list of popups.
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct RobrixPopupNotification {
-    #[uid] uid: WidgetUid,
-    #[source] source: ScriptObjectRef,
-    #[live] pub content: Option<LivePtr>,
-
-    #[rust] draw_list: Option<DrawList2d>,
-    #[redraw] #[live] draw_bg: DrawQuad,
-    #[layout] layout: Layout,
-    #[walk] walk: Walk,
+    #[live]
+    pub content: Option<LivePtr>,
+
+    #[rust(DrawList2d::new(cx))]
+    draw_list: DrawList2d,
+
+    #[redraw]
+    #[live]
+    draw_bg: DrawQuad,
+    #[layout]
+    layout: Layout,
+    #[walk]
+    walk: Walk,
     // A list of tuples containing individual widgets, its content and the close timer in the order they were added.
-    #[rust] popups: Vec<PopupEntry>,
+    #[rust]
+    pub popups: Vec<(View, PopupItem, Timer)>,
 }
 
-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);
+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);
+                    }
+                }
             }
-        });
+        }
+        self.draw_list.redraw(cx);
     }
 }
 
 impl Widget for RobrixPopupNotification {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         if matches!(event, Event::Signal) {
-            while let Some(popup_item) = PENDING_POPUP_NOTIFICATIONS.pop() {
+            while let Some(popup_item) = POPUP_NOTIFICATION.pop() {
                 self.push(cx, popup_item);
             }
         }
         if self.popups.is_empty() {
             return;
         }
-
-        let mut remove_index = None;
-
-        for (index, popup) in self.popups.iter_mut().enumerate() {
-            popup.view.handle_event(cx, event, scope);
-
-            if remove_index.is_none() && popup.close_timer.is_event(event).is_some() {
-                remove_index = Some(index);
+        for (index, (view, _popup_item, close_popup_timer)) in self.popups.iter_mut().enumerate() {
+            view.handle_event(cx, event, scope);
+            if close_popup_timer.is_event(event).is_some() {
+                self.popups.remove(index);
+                // Without this redraw, the last popup will not be removed from the screen automatically.
+                self.draw_bg.redraw(cx);
+                break;
             }
         }
-
-        if let Some(index) = remove_index {
-            self.popups.remove(index);
-            self.redraw_overlay(cx);
-        }
-
         self.widget_match_event(cx, event, scope);
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        let draw_list = self.draw_list.as_mut().unwrap();
-        draw_list.begin_overlay_reuse(cx);
+        self.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);
-            for popup in self.popups.iter_mut() {
+            for (view, _popup_item, _) in self.popups.iter_mut() {
                 let walk = walk.with_margin_bottom(5.0);
-                let _ = popup.view.draw_walk(cx, scope, walk);
+                let _ = view.draw_walk(cx, scope, walk);
             }
             cx.end_turtle();
         }
         self.draw_bg.end(cx);
-        draw_list.end(cx);
+        self.draw_list.end(cx);
         DrawStep::done()
     }
 }
 
 impl RobrixPopupNotification {
-    fn redraw_overlay(&self, cx: &mut Cx) {
-        if let Some(draw_list) = &self.draw_list {
-            draw_list.redraw(cx);
-        }
-        self.draw_bg.redraw(cx);
-    }
-
     /// Adds a new popup with a close button to the right side of the screen.
     ///
     /// 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_from_live_ptr(cx, self.content);
-        let left_side_view = view.view(cx, ids!(popup_content.inner.left_side_view));
-        let mut popup_icon = view.widget(cx, ids!(popup_content.inner.left_side_view.popup_icon));
-        let mut close_button = view.button(cx, ids!(close_button));
-        let mut popup_label = view.label(cx, ids!(popup_label));
-        popup_label.set_text(cx, &popup_item.message);
-
-        // Set the icon and icon color based on the popup kind.
-        let show_left_side_view = popup_item.kind != PopupKind::Blank;
-        left_side_view.set_visible(cx, show_left_side_view);
-        match popup_item.kind {
-            PopupKind::Error => {
-                script_apply_eval!(cx, popup_icon, {
-                    draw_icon.svg: mod.widgets.ICON_FORBIDDEN,
-                    draw_icon.color: mod.widgets.COLOR_PRIMARY,
-                });
+        let mut view = View::new_from_ptr(cx, self.content);
+        let mut background_color = None;
+        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);
+                background_color = Some(color);
+            } else {
+                view.set_visible(cx, false);
             }
-            PopupKind::Info => {
-                script_apply_eval!(cx, popup_icon, {
-                    draw_icon.svg: mod.widgets.ICON_INFO,
-                    draw_icon.color: mod.widgets.COLOR_PRIMARY,
-                });
-            }
-            PopupKind::Success => {
-                script_apply_eval!(cx, popup_icon, {
-                    draw_icon.svg: mod.widgets.ICON_CHECKMARK,
-                    draw_icon.color: mod.widgets.COLOR_PRIMARY,
-                });
-            }
-            PopupKind::Warning => {
-                script_apply_eval!(cx, popup_icon, {
-                    draw_icon.svg: mod.widgets.ICON_WARNING,
-                    draw_icon.color: #000000,
-                });
-            }
-            PopupKind::Blank => {}
         }
-
-        // Set the text and close button color based on the popup kind.
-        match popup_item.kind {
-            PopupKind::Error | PopupKind::Info | PopupKind::Success => {
-                script_apply_eval!(cx, popup_label, {
-                    draw_text +: { color: mod.widgets.COLOR_PRIMARY },
-                });
-                script_apply_eval!(cx, close_button, {
-                    draw_bg +: {
-                        color: #FFFFFF22,
-                        color_hover: #FFFFFF30,
-                        color_down: #FFFFFF42,
-                        border_color: #FFFFFF2C,
-                        border_color_hover: #FFFFFF38,
-                        border_color_down: #FFFFFF4A,
-                    },
-                    draw_icon +: { color: #FFFFFFFA }
-                });
-            }
-            PopupKind::Warning | PopupKind::Blank => {
-                script_apply_eval!(cx, popup_label, {
-                    draw_text +: { color: #000000 },
-                });
-                script_apply_eval!(cx, close_button, {
-                    draw_bg +: {
-                        color: #00000014,
-                        color_hover: #00000022,
-                        color_down: #x0000002E,
-                        border_color: #00000020,
-                        border_color_hover: #0000002C,
-                        border_color_down: #00000038,
-                    },
-                    draw_icon +: { color: #000000D0 }
-                });
-            }
-        }
-
-        // Set the background color of the popup based on its kind.
-        match popup_item.kind {
-            PopupKind::Blank => {
-                script_apply_eval!(cx, view, {
-                    draw_bg.color: mod.widgets.COLOR_PRIMARY,
-                });
-            }
-            PopupKind::Error => {
-                script_apply_eval!(cx, view, {
-                    draw_bg.color: mod.widgets.COLOR_FG_DANGER_RED,
-                });
-            }
-            PopupKind::Info => {
-                script_apply_eval!(cx, view, {
-                    draw_bg.color: mod.widgets.COLOR_INFO_BLUE,
-                });
-            }
-            PopupKind::Success => {
-                script_apply_eval!(cx, view, {
-                    draw_bg.color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
-                });
-            }
-            PopupKind::Warning => {
-                script_apply_eval!(cx, view, {
-                    draw_bg.color: mod.widgets.COLOR_WARNING_YELLOW,
-                });
-            }
+        // Apply popup item kind-specific styling
+        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(
+                cx,
+                live! {
+                    popup_content = {
+                        inner = {
+                            main_content = {
+                                popup_label = {
+                                    draw_text: {
+                                        color: (text_color),
+                                    }
+                                }
+                            }
+                            // For top to bottom progress bar.
+                            close_button_view = {
+                                close_button = {
+                                    draw_icon: {
+                                        color: (text_color),
+                                    }
+                                }
+                            }
+                        }
+                        // For Right to left progress bar.
+                        close_button_view = {
+                            close_button = {
+                                draw_icon: {
+                                    color: (text_color),
+                                }
+                            }
+                        }
+                    }
+                    draw_bg: {
+                        background_color: ( background_color )
+                    }
+                },
+            );
         }
-
         let close_timer = if let Some(duration) = popup_item.auto_dismissal_duration {
-            let mut progress_bar = view.view(cx, ids!(popup_content.progress_bar));
-            script_apply_eval!(cx, progress_bar, {
-                draw_bg +: { display_progress_bar: 1.0 }
-            });
-            progress_bar.animator_cut(cx, ids!(progress.off));
-            progress_bar.animator_play_with(cx, ids!(progress.on), Play::Forward { duration });
+            view.apply_over(
+                cx,
+                live! {
+                    popup_content = {
+                        progress_bar = {
+                            draw_bg: { anim_duration: (duration) }
+                        }
+                    }
+                },
+            );
+            view.animator_play(cx, ids!(mode.slide));
             cx.start_timeout(duration)
         } else {
-            let mut progress_bar = view.view(cx, ids!(popup_content.progress_bar));
-            script_apply_eval!(cx, progress_bar, {
-                draw_bg +: { display_progress_bar: 0.0 }
-            });
-            progress_bar.animator_cut(cx, ids!(progress.off));
+            view.apply_over(
+                cx,
+                live! {
+                    popup_content = {
+                        progress_bar = {
+                            draw_bg: { display_progress_bar: 0.0 }
+                        }
+                    }
+                },
+            );
             Timer::empty()
         };
-        self.popups.push(PopupEntry {
-            view,
-            close_timer,
-        });
-        self.redraw_overlay(cx);
+        self.popups.push((view, popup_item, close_timer));
+        self.redraw(cx);
     }
 
     /// Adds a new popup with a custom view to the right side of the screen.
@@ -580,6 +592,7 @@ impl RobrixPopupNotification {
     /// The `view` parameter should be constructed using `RobrixPopupNotification::content()`.
     /// The view should have a view with the id `popup_content` which should contain
     /// a `progress_bar` view with the id `progress_bar` and a `popup_label` view with the id `popup_label`.
+    /// The `progress_bar` view should have a `draw_bg` field with a `anim_duration` field that will be used to animate the progress bar.
     /// The `popup_label` view should have a `draw_text` field that will be used to display the popup's message.
     /// The custom view should also have a close button with the id `close_button` which should have a `draw_icon` field that will be used to display the close button's icon.
     ///
@@ -598,7 +611,7 @@ impl RobrixPopupNotification {
     ///     message: Cow::Borrowed("Welcome!"),
     ///     auto_dismissal_duration: Some(4.0),
     /// };
-    ///  view.label(cx, ids!(popup_label))
+    ///  view.label(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)
@@ -616,10 +629,7 @@ impl RobrixPopupNotification {
         popup_item.auto_dismissal_duration = popup_item
             .auto_dismissal_duration
             .map(|duration| duration.min(3. * 60.));
-        self.popups.push(PopupEntry {
-            view,
-            close_timer,
-        });
+        self.popups.push((view, popup_item, close_timer));
     }
 
     /// Returns a clone of the template for each  popup in the list.
@@ -632,11 +642,12 @@ impl RobrixPopupNotification {
 
 impl WidgetMatchEvent for RobrixPopupNotification {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        for (i, popup) in self.popups.iter_mut().enumerate() {
-            if popup.view.button(cx, ids!(close_button)).clicked(actions) {
-                cx.stop_timer(popup.close_timer);
+        for (i, (view, _popup_item, close_timer)) in self.popups.iter_mut().enumerate() {
+            if view.button(ids!(close_button)).clicked(actions) {
+                cx.stop_timer(*close_timer);
+                view.animator_cut(cx, ids!(mode.close_slider));
                 self.popups.remove(i);
-                self.redraw_overlay(cx);
+                self.draw_bg.redraw(cx);
                 break;
             }
         }
diff --git a/src/shared/restore_status_view.rs b/src/shared/restore_status_view.rs
index 5e1e89b29..d75bc5eba 100644
--- a/src/shared/restore_status_view.rs
+++ b/src/shared/restore_status_view.rs
@@ -8,34 +8,35 @@
 use makepad_widgets::*;
 use crate::utils::RoomNameId;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-    mod.widgets.RestoreStatusView = #(RestoreStatusView::register_widget(vm)) {
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+    use crate::shared::styles::*;
 
+    pub RestoreStatusView = {{RestoreStatusView}} {
         width: Fill, height: Fit,
         flow: Down,
-        align: Align{x: 0.5, y: 0.5},
+        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 +: {
+            draw_bg: {
                 color: (COLOR_ACTIVE_PRIMARY)
-                border_size: 3.0
+                border_size: 3.0,
             }
         }
 
-        restore_status_label := Label {
+        restore_status_label = <Label> {
             width: Fill, height: Fit,
-            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 +: {
+            align: {x: 0.5, y: 0.0},
+            padding: {left: 5.0, right: 0.0}
+            margin: {top: 10.0},
+            flow: RightWrap,
+            draw_text: {
                 color: (TYPING_NOTICE_TEXT_COLOR),
             }
         }
@@ -43,7 +44,7 @@ script_mod! {
 }
 
 /// A view that displays a spinner and a label to indicate that a restore operation is in progress for a room.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct RestoreStatusView {
     #[deref] view: View,
     #[live(true)] visible: bool,
@@ -74,7 +75,7 @@ impl RestoreStatusViewRef {
         if let Some(mut inner) = self.borrow_mut() {
             inner.visible = visible;
             if !visible {
-                inner.label(cx, ids!(restore_status_label))
+                inner.label(ids!(restore_status_label))
                     .set_text(cx, "");
             }
         }
@@ -98,8 +99,8 @@ impl RestoreStatusViewRef {
         room_name: &RoomNameId,
     ) {
         let Some(inner) = self.borrow() else { return };
-        let restore_status_spinner = inner.view.view(cx, ids!(restore_status_spinner));
-        let restore_status_label = inner.view.label(cx, ids!(restore_status_label));
+        let restore_status_spinner = inner.view.view(ids!(restore_status_spinner));
+        let restore_status_label = inner.view.label(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 ccbee0601..c47c145f2 100644
--- a/src/shared/room_filter_input_bar.rs
+++ b/src/shared/room_filter_input_bar.rs
@@ -1,64 +1,72 @@
 //! 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" so it can be
-//! reused consistently across both Desktop and Mobile layouts.
+//! 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.
 
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.RoomFilterInputBar = set_type_default() do #(RoomFilterInputBar::register_widget(vm)) {
-        ..mod.widgets.RoundedView
-
+    pub RoomFilterInputBar = {{RoomFilterInputBar}}<RoundedView> {
         width: Fill,
         height: 35,
 
         show_bg: true,
-        draw_bg +: {
-            color: (COLOR_PRIMARY)
-            border_radius: 4.0
-            border_color: (COLOR_SECONDARY)
-            border_size: 1.0
+        draw_bg: {
+            color: (COLOR_PRIMARY),
+            border_radius: 4.0,
+            border_color: (COLOR_SECONDARY),
+            border_size: 1.0,
         }
 
-        padding: Inset{top: 3, bottom: 3, left: 10, right: 4.5}
+        padding: {top: 3, bottom: 3, left: 10, right: 4.5}
         margin: 0
         spacing: 4,
-        align: Align{x: 0.0, y: 0.5},
-
-        Icon {
-            draw_icon +: {
-                svg: (ICON_SEARCH),
-                color: (COLOR_TEXT_INPUT_IDLE),
+        align: {x: 0.0, y: 0.5},
+
+        <Icon> {
+            draw_icon: {
+                svg_file: (ICON_SEARCH),
+                fn get_color(self) -> vec4 {
+                    return (COLOR_TEXT_INPUT_IDLE);
+                }
             }
-            icon_walk: Walk{width: 14, height: 14}
+            icon_walk: {width: 14, height: Fit}
         }
 
-        input := RobrixTextInput {
+        input = <RobrixTextInput> {
             width: Fill,
             height: Fit,
             flow: Right, // do not wrap
-            padding: 5
-            
+
             empty_text: "Filter rooms & spaces..."
-            
-            draw_bg.border_size: 0.0
-            draw_text +: {
-                text_style: theme.font_regular { font_size: 10 },
+
+            draw_text: {
+                text_style: { font_size: 10 },
             }
         }
 
-        clear_button := RobrixNeutralIconButton {
+        clear_button = <RobrixIconButton> {
             visible: false,
-            padding: Inset{top: 5, bottom: 5, left: 9, right: 9},
+            padding: {top: 5, bottom: 5, left: 9, right: 9},
             spacing: 0,
-            align: Align{x: 0.5, y: 0.5}
-            draw_icon.svg: (ICON_CLOSE)
-            icon_walk: Walk{width: Fit, height: 10, margin: 0}
+            align: {x: 0.5, y: 0.5}
+            draw_bg: {
+                color: (COLOR_SECONDARY)
+            }
+            draw_icon: {
+                svg_file: (ICON_CLOSE),
+                color: (COLOR_TEXT)
+            }
+            icon_walk: {width: Fit, height: 10, margin: 0}
         }
     }
 }
@@ -66,27 +74,19 @@ script_mod! {
 /// 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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct RoomFilterInputBar {
     #[deref] view: View,
 }
 
 /// Actions emitted by the `RoomFilterInputBar` based on user interaction with it.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 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 +99,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(cx, ids!(input));
-        let clear_button = self.button(cx, ids!(clear_button));
+    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));
 
         // Handle user changing the input text
         if let Some(keywords) = input.changed(actions) {
@@ -115,7 +115,8 @@ impl WidgetMatchEvent for RoomFilterInputBar {
             clear_button.set_visible(cx, !keywords.is_empty());
             clear_button.reset_hover(cx);
             cx.widget_action(
-                self.widget_uid(), 
+                self.widget_uid(),
+                &scope.path,
                 RoomFilterAction::Changed(keywords)
             );
         }
@@ -125,7 +126,8 @@ impl WidgetMatchEvent for RoomFilterInputBar {
             clear_button.set_visible(cx, false);
             input.set_key_focus(cx);
             cx.widget_action(
-                self.widget_uid(), 
+                self.widget_uid(),
+                &scope.path,
                 RoomFilterAction::Changed(String::new())
             );
         }
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index a80fa55e5..661035944 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -1,252 +1,306 @@
 use makepad_widgets::*;
 
-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_TRIANGLE_DOWN    = crate_resource("self://resources/icons/triangle_down_fill.svg")
-    mod.widgets.ICON_TRIANGLE_UP      = crate_resource("self://resources/icons/triangle_up_fill.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 {
+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>{
         font_size: (13),
     }
 
-    mod.widgets.REGULAR_TEXT = theme.font_regular {
+    pub REGULAR_TEXT = <THEME_FONT_REGULAR>{
         font_size: (10),
     }
 
-    mod.widgets.TEXT_SUB = theme.font_regular {
+    pub TEXT_SUB = <THEME_FONT_REGULAR>{
         font_size: (10),
     }
 
-    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 USERNAME_FONT_SIZE = 11
+    pub USERNAME_TEXT_COLOR = #x2
+    pub USERNAME_TEXT_STYLE = <THEME_FONT_BOLD>{
+        font_size: (USERNAME_FONT_SIZE),
     }
 
-    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 COLOR_ROBRIX_PURPLE = #572DCC; // the purple color from the Robrix logo
+    pub COLOR_ROBRIX_CYAN = #05CDC7; // the cyan color from the Robrix logo
 
+    pub TYPING_NOTICE_TEXT_COLOR = #121570
 
-    mod.widgets.MESSAGE_FONT_SIZE = 11
-    mod.widgets.REDACTED_MESSAGE_FONT_SIZE = 10
-
-    mod.widgets.MESSAGE_TEXT_COLOR = #x333
+    pub MESSAGE_FONT_SIZE = 11
+    pub MESSAGE_TEXT_COLOR = #x333
     // notices (automated messages from bots) use a lighter color
-    mod.widgets.COLOR_MESSAGE_NOTICE_TEXT = #x888
-    mod.widgets.MESSAGE_TEXT_LINE_SPACING = 1.3
+    pub COLOR_MESSAGE_NOTICE_TEXT = #x888
+    pub 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).
-    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_TEXT_STYLE = <THEME_FONT_REGULAR>{
+        font_size: (MESSAGE_FONT_SIZE),
+        line_spacing: (MESSAGE_TEXT_LINE_SPACING),
     }
 
-    mod.widgets.MESSAGE_REPLY_PREVIEW_FONT_SIZE = 9.5
-
+    pub MESSAGE_REPLY_PREVIEW_FONT_SIZE = 9.5
 
 
-    mod.widgets.SMALL_STATE_FONT_SIZE = 9.0
-
-
-    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 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.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 TIMESTAMP_FONT_SIZE = 8.5
+    pub TIMESTAMP_TEXT_COLOR = #x999
+    pub TIMESTAMP_TEXT_STYLE = <THEME_FONT_REGULAR>{
+        font_size: (TIMESTAMP_FONT_SIZE),
     }
 
-    mod.widgets.ROOM_NAME_TEXT_COLOR = #x0
-
-    mod.widgets.COLOR_META = #xccc
-
-    mod.widgets.COLOR_DIVIDER = #00000018
-
-    mod.widgets.COLOR_DIVIDER_DARK = #00000044
-
-    mod.widgets.COLOR_FG_ACCEPT_GREEN = #138808
-    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_INFO_BLUE = #0f88fe
-    mod.widgets.COLOR_WARNING_YELLOW = #fcdb03
-    mod.widgets.COLOR_TEXT_WARNING_NOT_FOUND = #953800
-
-    // mod.widgets.COLOR_SELECT_TEXT = #A6CDFE
-    // mod.widgets.COLOR_SELECT_TEXT = #B5D8FE
-    // mod.widgets.COLOR_SELECT_TEXT = #6BB1FD88 // results in #B5D8FE when mixed halfway with white
-    // mod.widgets.COLOR_SELECT_TEXT = #57A3FB44
-    // 0x4C is ~30% opacity , which results in #B5D8FE when atop pure white
-    // But i like the look of 0x33 20% opacity a little better.
-    mod.widgets.COLOR_SELECT_TEXT = #087DFC33
-    // mod.widgets.COLOR_SELECT_TEXT = #4D9BFD88 // results in #A6CDFE when mixed halfway with white
-
-    mod.widgets.COLOR_PRIMARY = #ffffff
-
-    mod.widgets.COLOR_PRIMARY_DARKER = #fefefe
-    mod.widgets.COLOR_SECONDARY = #E3E3E3
-    mod.widgets.COLOR_SECONDARY_DARKER = #C8C8C8
-
-    mod.widgets.COLOR_ACTIVE_PRIMARY = #0f88fe
-
-    mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER = #106fcc
-
-    mod.widgets.COLOR_BG_PREVIEW = #F0F5FF
-
-    mod.widgets.COLOR_BG_PREVIEW_HOVER = #CDEDDF
-
-    mod.widgets.COLOR_AVATAR_BG = #52b2ac
-
-    mod.widgets.COLOR_AVATAR_BG_IDLE = #d8d8d8
-
-
-    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
-
-
-    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
+    pub ROOM_NAME_TEXT_COLOR = #x0
+    pub COLOR_META = #xccc
+
+    pub COLOR_DIVIDER = #00000018
+    pub COLOR_DIVIDER_DARK = #00000044
+
+    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
+
+    pub COLOR_SELECT_TEXT = #A6CDFE
+
+    pub COLOR_PRIMARY = #ffffff
+    pub COLOR_PRIMARY_DARKER = #fefefe
+    pub COLOR_SECONDARY = #E3E3E3
+    pub COLOR_SECONDARY_DARKER = #C8C8C8
+
+    pub COLOR_ACTIVE_PRIMARY = #0f88fe
+    pub COLOR_ACTIVE_PRIMARY_DARKER = #106fcc
+
+    pub COLOR_BG_PREVIEW = #F0F5FF
+    pub COLOR_BG_PREVIEW_HOVER = #CDEDDF
+
+    pub COLOR_AVATAR_BG = #52b2ac
+    pub COLOR_AVATAR_BG_IDLE = #d8d8d8
+
+
+    pub COLOR_UNREAD_BADGE_MENTIONS = #FF0000;
+    pub COLOR_UNREAD_BADGE_MARKED   = (COLOR_ROBRIX_CYAN);
+    pub COLOR_UNREAD_BADGE_MESSAGES = #AAAAAA
+
+
+    pub COLOR_TEXT_IDLE = #d8d8d8
+    pub COLOR_TEXT = #1C274C
+    pub COLOR_TEXT_INPUT_IDLE = #d8d8d8
+
+    pub COLOR_TRANSPARENT = #00000000
+    pub COLOR_WARNING = #fcdb03
+
+    pub COLOR_LINK_HOVER = #21B070
+
+
+    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
+
+    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,
+
+            // 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_LINK_HOVER = #21B070
+    // A text input widget styled for Robrix.
+    pub RobrixTextInput = <TextInput> {
+        width: Fill, height: Fit,
+        margin: 0,
+        align: {y: 0.5}
 
+        draw_bg: {
+            color: (COLOR_PRIMARY)
+            border_radius: 2.0
+            border_size: 0.0
 
-    // This is chosen to nicely fit the 3 window chrome buttons on macOS
-    mod.widgets.NAVIGATION_TAB_BAR_SIZE = 76
-    mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE = (mod.widgets.NAVIGATION_TAB_BAR_SIZE * 0.65)
-    mod.widgets.NAVIGATION_TAB_BAR_AVATAR_FONT_SIZE = (mod.widgets.NAVIGATION_TAB_BAR_AVATAR_SIZE * 0.4)
+            color_hover: (COLOR_PRIMARY)
+            color_focus: (COLOR_PRIMARY)
+            color_down: (COLOR_PRIMARY)
+            color_empty: (COLOR_PRIMARY)
+            color_disabled: (COLOR_BG_DISABLED)
 
+            border_color: (COLOR_PRIMARY)
+        }
 
-    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
+        draw_selection: {
+            color: (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)
+        }
 
-    mod.widgets.COLOR_IMAGE_VIEWER_BACKGROUND = #333333CC // 80% Opacity
+        draw_cursor: {
+            color: (MESSAGE_TEXT_COLOR)
+        }
 
-    mod.widgets.COLOR_IMAGE_VIEWER_META_BACKGROUND = #E8E8E8
+        draw_text: {
+            text_style: <MESSAGE_TEXT_STYLE>{},
+            color: (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 {
+                return mix(
+                    mix(
+                        mix(
+                            mix(
+                                self.color,
+                                mix(
+                                    self.color_hover,
+                                    self.color_down,
+                                    self.down
+                                ),
+                                self.hover
+                            ),
+                            self.color_focus,
+                            self.focus
+                        ),
+                        self.color_empty,
+                        self.empty
+                    ),
+                    self.color_disabled,
+                    self.disabled
+                )
+            }
+        }
+    }
 
-    // A text input widget styled for Robrix.
-    mod.widgets.RobrixTextInput = TextInput {
-        width: Fill, height: Fit
-        flow: Flow.Right{wrap: true},
-        align: Align{y: 0.5}
-        margin: 0,
+    pub SimpleTextInput = <RobrixTextInput> {
         padding: 10,
-
-        draw_bg +: {
-            border_radius: 4.0 // was previously 2.0
+        width: Fill, height: Fit
+        flow: RightWrap,
+        draw_bg: {
+            color: (COLOR_SECONDARY_DARKER)
+            border_radius: 2.0
             border_size: 1.0
 
-            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)
-
-            color_2: vec4(-1.0, -1.0, -1.0, -1.0) // don't use color_2*
-            border_color_2: vec4(-1.0, -1.0, -1.0, -1.0) // don't use border_color_2*
+            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)
         }
-
-        draw_selection +: {
-            color: mod.widgets.COLOR_SELECT_TEXT
-            // color: mix(mod.widgets.COLOR_BG_DISABLED, mod.widgets.COLOR_SELECT_TEXT, 0.5)
-            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: (mod.widgets.MESSAGE_TEXT_COLOR)
-        }
-
-        draw_text +: {
-            color: (mod.widgets.MESSAGE_TEXT_COLOR),
-            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: #9,
-            color_empty_focus: #9,
-
-            text_style: mod.widgets.MESSAGE_TEXT_STYLE {},
+        draw_text: {
+            wrap: Word,
         }
+        empty_text: "Add a display name..."
     }
 }
 
 
+pub const NAVIGATION_TAB_BAR_SIZE: f64 = 68.0;
+pub const REDACTED_MESSAGE_FONT_SIZE: f32 = 10.0;
+
 /// #FFFFFF
 pub const COLOR_PRIMARY:               Vec4 = vec4(1.0, 1.0, 1.0, 1.0);
 /// #0F88FE
@@ -277,93 +331,17 @@ pub const COLOR_UNREAD_BADGE_MARKED:   Vec4 = COLOR_ROBRIX_CYAN;
 pub const COLOR_UNREAD_BADGE_MESSAGES: Vec4 = vec4(0.667, 0.667, 0.667, 1.0);
 /// #FF6e00
 pub const COLOR_UNKNOWN_ROOM_AVATAR:   Vec4 = vec4(1.0, 0.431, 0.0, 1.0);
+/// #fcdb03
+pub const COLOR_WARNING_YELLOW:        Vec4 = vec4(0.988, 0.859, 0.01, 1.0);
+/// #0f88fe
+pub const COLOR_INFO_BLUE:             Vec4 = vec4(0.05, 0.53, 0.996, 1.0);
+/// #FFFFFF
+pub const COLOR_WHITE:                 Vec4 = vec4(1.0, 1.0, 1.0, 1.0);
 /// #888888
 pub const COLOR_MESSAGE_NOTICE_TEXT:   Vec4 = vec4(0.5, 0.5, 0.5, 1.0);
 /// #953800
-pub const COLOR_TEXT_WARNING_NOT_FOUND: Vec4 = vec4(0.584, 0.219, 0.0, 1.0);
+pub const COLOR_WARNING_NOT_FOUND:     Vec4 = vec4(0.584, 0.219, 0.0, 1.0);
 /// #F0F5FF
 pub const COLOR_BG_PREVIEW:            Vec4 = vec4(0.941, 0.961, 1.0, 1.0);
 /// #CDEDDF
 pub const COLOR_BG_PREVIEW_HOVER:      Vec4 = vec4(0.804, 0.929, 0.875, 1.0);
-
-/// Applies positive (green) button styling to the given button.
-pub fn apply_positive_button_style(cx: &mut Cx, button: &mut ButtonRef) {
-    script_apply_eval!(cx, button, {
-        draw_bg +: {
-            border_color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
-            color: mod.widgets.COLOR_BG_ACCEPT_GREEN,
-            color_hover: #D4EED4,
-            color_down: #B8E0B8,
-        }
-        draw_text +: {
-            color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
-            color_hover: mod.widgets.COLOR_FG_ACCEPT_GREEN,
-            color_down: mod.widgets.COLOR_FG_ACCEPT_GREEN,
-        }
-        draw_icon +: {
-            color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
-        }
-    });
-}
-
-/// Applies negative (red) button styling to the given button.
-pub fn apply_negative_button_style(cx: &mut Cx, button: &mut ButtonRef) {
-    script_apply_eval!(cx, button, {
-        draw_bg +: {
-            border_color: mod.widgets.COLOR_FG_DANGER_RED,
-            color: mod.widgets.COLOR_BG_DANGER_RED,
-            color_hover: #F0D4D4,
-            color_down: #E0B8B8,
-        }
-        draw_text +: {
-            color: mod.widgets.COLOR_FG_DANGER_RED,
-            color_hover: mod.widgets.COLOR_FG_DANGER_RED,
-            color_down: mod.widgets.COLOR_FG_DANGER_RED,
-        }
-        draw_icon +: {
-            color: mod.widgets.COLOR_FG_DANGER_RED,
-        }
-    });
-}
-
-/// Applies neutral (gray) button styling to the given button.
-pub fn apply_neutral_button_style(cx: &mut Cx, button: &mut ButtonRef) {
-    script_apply_eval!(cx, button, {
-        draw_bg +: {
-            border_color: mod.widgets.COLOR_BG_DISABLED,
-            color: mod.widgets.COLOR_SECONDARY,
-            color_hover: #D0D0D0,
-            color_down: #C0C0C0,
-        }
-        draw_text +: {
-            color: mod.widgets.COLOR_TEXT,
-            color_hover: mod.widgets.COLOR_TEXT,
-            color_down: mod.widgets.COLOR_TEXT,
-        }
-        draw_icon +: {
-            color: mod.widgets.COLOR_TEXT,
-        }
-    });
-}
-
-/// Applies the primary (blue) button styling to the given button.
-pub fn apply_primary_button_style(cx: &mut Cx, button: &mut ButtonRef) {
-    script_apply_eval!(cx, button, {
-        draw_bg +: {
-            color: mod.widgets.COLOR_ACTIVE_PRIMARY,
-            color_hover: mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER,
-            color_down: #0C5DAA,
-            border_color: #0000,
-            border_color_hover: #0000,
-            border_color_down: #0000,
-        }
-        draw_text +: {
-            color: mod.widgets.COLOR_PRIMARY,
-            color_hover: mod.widgets.COLOR_PRIMARY,
-            color_down: mod.widgets.COLOR_PRIMARY,
-        }
-        draw_icon +: {
-            color: mod.widgets.COLOR_PRIMARY,
-        }
-    });
-}
diff --git a/src/shared/text_or_image.rs b/src/shared/text_or_image.rs
index a535661ff..808d890a0 100644
--- a/src/shared/text_or_image.rs
+++ b/src/shared/text_or_image.rs
@@ -5,50 +5,51 @@
 
 use makepad_widgets::{image_cache::ImageCacheImpl, *};
 use matrix_sdk::ruma::events::room::MediaSource;
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
-    mod.widgets.DEFAULT_IMAGE = crate_resource("self://resources/img/default_image.png")
-
-
-    mod.widgets.TextOrImage = #(TextOrImage::register_widget(vm)) {
+    use crate::shared::styles::*;
+    DEFAULT_IMAGE = dep("crate://self/resources/img/default_image.png")
 
+    pub TextOrImage = {{TextOrImage}} {
         width: Fill, height: Fit,
         flow: Overlay,
 
-        text_view := SolidView {
+        text_view = <View> {
             visible: true,
-            width: Fill, height: Fit,
             show_bg: true,
-            draw_bg.color: #dddddd
-
-            label := Label {
+            draw_bg: {
+                color: #dddddd
+            }
+            width: Fill, height: Fit,
+            label = <Label> {
                 width: Fill, height: Fit,
-                flow: Flow.Right{wrap: true},
-                draw_text +: {
-                    text_style: MESSAGE_TEXT_STYLE { }
+                draw_text: {
+                    wrap: Word,
+                    text_style: <MESSAGE_TEXT_STYLE> { }
                     color: (MESSAGE_TEXT_COLOR),
                 }
             }
         }
-        image_view := View {
+        image_view = <View> {
             visible: false,
-            cursor: MouseCursor.Default, // Use `Hand` once we support clicking on the image
+            cursor: Default, // Use `Hand` once we support clicking on the image
             width: Fill, height: Fit,
-            image := Image {
+            image = <Image> {
                 width: Fill, height: Fit,
-                fit: ImageFit.Smallest,
+                fit: Smallest,
             }
         }
-        default_image_view := View {
+        default_image_view = <View> {
             visible: false,
-            cursor: MouseCursor.Default, // Use `Hand` once we support clicking on the image
+            cursor: Default, // Use `Hand` once we support clicking on the image
             width: Fill, height: Fit,
-            image := Image {
+            image = <Image> {
                 width: Fill, height: Fit,
-                fit: ImageFit.Smallest,
-                src: (mod.widgets.DEFAULT_IMAGE)
+                fit: Smallest,
+                source: (DEFAULT_IMAGE)
             }
         }
     }
@@ -60,7 +61,7 @@ script_mod! {
 /// 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(Script, Widget, ScriptHook)]
+#[derive(Live, Widget, LiveHook)]
 pub struct TextOrImage {
     #[deref] view: View,
     #[rust] status: TextOrImageStatus,
@@ -72,14 +73,15 @@ 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(cx, ids!(image_view.image)).area();
+            let image_area = self.view.image(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(), 
+                        self.widget_uid(),
+                        &scope.path,
                         TextOrImageAction::Clicked(mxc_uri.clone()),
                     );
                     cx.set_cursor(MouseCursor::Default);
@@ -107,10 +109,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(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.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.status = TextOrImageStatus::Text;
     }
 
@@ -126,14 +128,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(cx, ids!(image_view.image));
+        let image_ref = self.view.image(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(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);
+                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);
                 Ok(())
             }
             Err(e) => {
@@ -150,9 +152,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(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);
+        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);
     }
 }
 
@@ -196,11 +198,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(cx, ids!(image_view.image))
+                .image(ids!(image_view.image))
                 .borrow()
                 .and_then(|image_inner| image_inner.get_texture(0).clone())
         })
@@ -217,10 +219,9 @@ pub enum TextOrImageStatus {
 }
 
 /// Actions emitted by the `TextOrImage` based on user interaction with it.
-#[derive(Debug, Clone, Default)]
+#[derive(Debug, Clone, DefaultNone)]
 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 c84935fd3..6f8863573 100644
--- a/src/shared/timestamp.rs
+++ b/src/shared/timestamp.rs
@@ -4,24 +4,27 @@
 use chrono::{DateTime, Local};
 use makepad_widgets::*;
 
+use crate::shared::callout_tooltip::{CalloutTooltipOptions, TooltipPosition};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+use super::callout_tooltip::TooltipAction;
 
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
-    mod.widgets.Timestamp = #(Timestamp::register_widget(vm)) {
-
+    use crate::shared::styles::*;
 
+    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)
             }
         }
@@ -31,7 +34,7 @@ script_mod! {
 /// 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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct Timestamp {
     #[deref] view: View,
 
@@ -48,7 +51,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(),  TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
                 false
             }
             _ => false,
@@ -57,7 +60,8 @@ 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(), 
+                self.widget_uid(),
+                &scope.path,
                 TooltipAction::HoverIn {
                     text: self.dt.format(locale_extended_fmt_en_us).to_string(),
                     widget_rect: area.rect(cx),
@@ -79,7 +83,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(cx, ids!(ts_label)).set_text(
+        self.label(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 ab184fa57..e149bb956 100644
--- a/src/shared/unread_badge.rs
+++ b/src/shared/unread_badge.rs
@@ -3,29 +3,30 @@
 
 use makepad_widgets::*;
 
+use crate::shared::styles::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
-
-    mod.widgets.UnreadBadge = #(UnreadBadge::register_widget(vm)) {
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
+    use link::shaders::*;
+    use crate::shared::styles::*;
 
+    pub UnreadBadge = {{UnreadBadge}} {
         width: 30, height: 20,
-        align: Align{ x: 0.5, y: 0.5 }
+        align: { x: 0.5, y: 0.5 }
         flow: Overlay,
 
-        rounded_view := View {
+        rounded_view = <View> {
             width: Fill,
             height: Fill,
             show_bg: true,
-            draw_bg +: {
-                badge_color: instance((COLOR_UNREAD_BADGE_MESSAGES)),
-                border_radius: instance(4.0)
-                // Set this border_size to a larger value to make the oval smaller 
-                border_size: instance(2.0)
-
-                pixel: fn() {
-                    let sdf = Sdf2d.viewport(self.pos * self.rect_size)
+            draw_bg: {
+                instance badge_color: (COLOR_UNREAD_BADGE_MESSAGES),
+                instance border_radius: 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)
                     sdf.box(
                         self.border_size,
                         1.0,
@@ -39,24 +40,23 @@ script_mod! {
             }
         }
         // 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: theme.font_regular {font_size: 8.0},
+                text_style: {font_size: 8.0},
             }
         }
     }
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct UnreadBadge {
-    #[source] source: ScriptObjectRef,
     #[deref] view: View,
     #[live] is_marked_unread: bool,
     #[live] unread_mentions: u64,
@@ -88,25 +88,23 @@ 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(cx, ids!(label_count))
+            self.label(ids!(label_count))
                 .set_text(cx, &format!("{}{plus_sign}", std::cmp::min(self.unread_mentions, 99)));
-            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.view(ids!(rounded_view)).apply_over(cx, live!{
+                draw_bg: {
+                    border_size: (border_size),
+                    badge_color: (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(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 +: {
+            self.label(ids!(label_count)).set_text(cx, "");
+            self.view(ids!(rounded_view)).apply_over(cx, live!{
+                draw_bg: {
                     border_size: 6.0, // larger value = smaller dot
-                    badge_color: mod.widgets.COLOR_UNREAD_BADGE_MARKED
+                    badge_color: (COLOR_UNREAD_BADGE_MARKED)
                 }
             });
             self.visible = true;
@@ -114,13 +112,12 @@ 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(cx, ids!(label_count))
+            self.label(ids!(label_count))
                 .set_text(cx, &format!("{}{plus_sign}", std::cmp::min(self.unread_messages, 99)));
-            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.view(ids!(rounded_view)).apply_over(cx, live!{
+                draw_bg: {
+                    border_size: (border_size),
+                    badge_color: (COLOR_UNREAD_BADGE_MESSAGES)
                 }
             });
             self.visible = true;
diff --git a/src/shared/verification_badge.rs b/src/shared/verification_badge.rs
index 2a0ef3588..3039efe91 100644
--- a/src/shared/verification_badge.rs
+++ b/src/shared/verification_badge.rs
@@ -9,85 +9,79 @@ use crate::{
 
 
 // First, define the verification icons component layout
-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: (NAVIGATION_TAB_BAR_SIZE * 0.28),
-            height: (NAVIGATION_TAB_BAR_SIZE * 0.28),
-            margin: 0,
-        }
-        margin: Inset{left: 0, right: 3, top: 2, bottom: 0}
+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}
     }
 
-    mod.widgets.IconYes = View {
-
+    pub IconYes = <View> {
         visible: false
         width: Fit, height: Fit
-        mod.widgets.VerificationIcon {
-            draw_icon +: {
-                svg: (mod.widgets.VERIFICATION_YES),
-                get_color: fn() -> vec4 {
+        <VerificationIcon> {
+            draw_icon: {
+                svg_file: (VERIFICATION_YES),
+                fn get_color(self) -> vec4 {
                     return (COLOR_FG_ACCEPT_GREEN);
                 }
             }
         }
     }
 
-    mod.widgets.IconNo = View {
-
+    pub IconNo = <View> {
         visible: false
         width: Fit, height: Fit
-        mod.widgets.VerificationIcon {
-            draw_icon +: {
-                svg: (mod.widgets.VERIFICATION_NO),
-                get_color: fn() -> vec4 {
+        <VerificationIcon> {
+            draw_icon: {
+                svg_file: (VERIFICATION_NO),
+                fn get_color(self) -> vec4 {
                     return (COLOR_FG_DANGER_RED);
                 }
             }
         }
     }
 
-    mod.widgets.IconUnk = View {
-
+    pub IconUnk = <View> {
         visible: false
         width: Fit, height: Fit
-        mod.widgets.VerificationIcon {
-            draw_icon +: {
-                svg: (mod.widgets.VERIFICATION_UNK),
-                get_color: fn() -> vec4 {
+        <VerificationIcon> {
+            draw_icon: {
+                svg_file: (VERIFICATION_UNK),
+                fn get_color(self) -> vec4 {
                     return #x888888;
                 }
             }
         }
     }
 
-    mod.widgets.VerificationBadge = #(VerificationBadge::register_widget(vm)) {
-
+    pub VerificationBadge = {{VerificationBadge}} {
         width: Fit, height: Fit
         flow: Overlay
-        align: Align{ x: 1.0, y: 0 }
+        align: { x: 1.0, y: 0 }
 
-        verification_icons := View {
+        verification_icons = <View> {
             flow: Overlay
-            align: Align{ x: 1.0, y: 0 }
+            align: { x: 1.0, y: 0 }
             width: Fit, height: Fit
 
-            icon_yes := mod.widgets.IconYes {}
-            icon_no := mod.widgets.IconNo {}
-            icon_unk := mod.widgets.IconUnk {}
+            icon_yes = <IconYes> {}
+            icon_no = <IconNo> {}
+            icon_unk = <IconUnk> {}
         }
     }
 }
 
-#[derive(Script, Widget)]
+#[derive(Live, Widget)]
 pub struct VerificationBadge {
     #[deref]
     view: View,
@@ -95,20 +89,12 @@ pub struct VerificationBadge {
     verification_state: VerificationState,
 }
 
-impl ScriptHook for VerificationBadge {
-    fn on_after_apply(
-        &mut self,
-        vm: &mut ScriptVm,
-        _apply: &Apply,
-        _scope: &mut Scope,
-        _value: ScriptValue,
-    ) {
-        vm.with_cx_mut(|cx| {
-            if let Some(client) = get_client() {
-                self.verification_state = client.encryption().verification_state().get();
-                self.update_icon_visibility(cx);
-            }
-        });
+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);
+        }
     }
 }
 
@@ -139,9 +125,9 @@ impl VerificationBadge {
             VerificationState::Verified => (true, false, false),
         };
 
-        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.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.redraw(cx);
     }
 }
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 30fccc5a2..365577e8c 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -15,16 +15,16 @@ use matrix_sdk::{
                 message::RoomMessageEventContent, power_levels::RoomPowerLevels, MediaSource
             }, MessageLikeEventType, StateEventType
         }, matrix_uri::MatrixId, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, RoomOrAliasId, UserId, uint
-    }, sliding_sync::VersionBuilder, Client, ClientBuildError, Error, OwnedServerName, Room, RoomDisplayName, RoomMemberships, RoomState, SessionChange, SuccessorRoom
+    }, sliding_sync::VersionBuilder, Client, ClientBuildError, Error, OwnedServerName, Room, RoomDisplayName, RoomMemberships, RoomState, SuccessorRoom
 };
 use matrix_sdk_ui::{
-    RoomListService, Timeline, encryption_sync_service, room_list_service::{RoomListItem, RoomListLoadingState, SyncIndicator, filters}, sync_service::{self, SyncService}, timeline::{LatestEventValue, RoomExt, TimelineEventItemId, TimelineFocus, TimelineItem, TimelineReadReceiptTracking, TimelineDetails}
+    RoomListService, Timeline, room_list_service::{RoomListItem, RoomListLoadingState, SyncIndicator, filters}, sync_service::{self, SyncService}, timeline::{LatestEventValue, RoomExt, TimelineEventItemId, TimelineFocus, TimelineItem, TimelineReadReceiptTracking, TimelineDetails}
 };
 use robius_open::Uri;
 use ruma::{OwnedRoomOrAliasId, RoomId, events::tag::Tags};
 use tokio::{
     runtime::Handle,
-    sync::{broadcast, mpsc::{Sender, UnboundedReceiver, UnboundedSender}, watch, Notify}, task::JoinHandle, time::error::Elapsed,
+    sync::{mpsc::{Sender, UnboundedReceiver, UnboundedSender}, watch, Notify}, task::JoinHandle, time::error::Elapsed,
 };
 use url::Url;
 use std::{borrow::Cow, cmp::{max, min}, future::Future, hash::{BuildHasherDefault, DefaultHasher}, iter::Peekable, ops::{Deref, DerefMut, Not}, path:: Path, sync::{Arc, LazyLock, Mutex}, time::Duration};
@@ -180,10 +180,6 @@ async fn login(
                 cli
             };
             let (client, client_session) = build_client(cli, app_data_dir()).await?;
-            Cx::post_action(LoginAction::Status {
-                title: "Authenticating".into(),
-                status: format!("Logging in as {}...", cli.user_id),
-            });
             // Attempt to login using the CLI-provided username & password.
             let login_result = client
                 .matrix_auth()
@@ -720,7 +716,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
@@ -1920,7 +1916,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) => {
@@ -2336,111 +2332,87 @@ async fn start_matrix_client_login_and_sync(rt: Handle) {
         None
     };
     let cli: Cli = cli_parse_result.unwrap_or(Cli::default());
-    // `initial_client_opt` holds the client obtained from the session restore or CLI auto-login.
-    // On subsequent iterations of the login loop (after a post-auth setup failure), it is `None`,
-    // which causes the loop to wait for the user to submit a new manual login request.
-    let mut initial_client_opt = new_login_opt;
-
-    let (client, sync_service, logged_in_user_id) = 'login_loop: loop {
-        let (client, _sync_token) = match initial_client_opt.take() {
-            Some(login) => login,
-            None => {
-                loop {
-                    log!("Waiting for login request...");
-                    match login_receiver.recv().await {
-                        Some(login_request) => {
-                            match login(&cli, login_request).await {
-                                Ok((client, sync_token)) => break (client, sync_token),
-                                Err(e) => {
-                                    error!("Login failed: {e:?}");
-                                    Cx::post_action(LoginAction::LoginFailure(format!("{e}")));
-                                    enqueue_rooms_list_update(RoomsListUpdate::Status {
-                                        status: format!("Login failed: {e}"),
-                                    });
-                                }
+    let (client, _sync_token) = match new_login_opt {
+        Some(new_login) => new_login,
+        None => {
+            loop {
+                log!("Waiting for login request...");
+                match login_receiver.recv().await {
+                    Some(login_request) => {
+                        match login(&cli, login_request).await {
+                            Ok((client, sync_token)) => {
+                                break (client, sync_token);
+                            }
+                            Err(e) => {
+                                error!("Login failed: {e:?}");
+                                Cx::post_action(LoginAction::LoginFailure(format!("{e}")));
+                                enqueue_rooms_list_update(RoomsListUpdate::Status {
+                                    status: format!("Login failed: {e}"),
+                                });
                             }
-                        },
-                        None => {
-                            error!("BUG: login_receiver hung up unexpectedly");
-                            let err = String::from("Please restart Robrix.\n\nUnable to listen for login requests.");
-                            Cx::post_action(LoginAction::LoginFailure(err.clone()));
-                            enqueue_rooms_list_update(RoomsListUpdate::Status {
-                                status: err,
-                            });
-                            return;
                         }
+                    },
+                    None => {
+                        error!("BUG: login_receiver hung up unexpectedly");
+                        let err = String::from("Please restart Robrix.\n\nUnable to listen for login requests.");
+                        Cx::post_action(LoginAction::LoginFailure(err.clone()));
+                        enqueue_rooms_list_update(RoomsListUpdate::Status {
+                            status: err,
+                        });
+                        return;
                     }
                 }
             }
-        };
-
-        // Deallocate the default SSO client after a successful login.
-        if let Ok(mut client_opt) = DEFAULT_SSO_CLIENT.lock() {
-            let _ = client_opt.take();
         }
+    };
 
-        let logged_in_user_id: OwnedUserId = client.user_id()
-            .expect("BUG: Client::user_id() returned None after successful login!")
-            .to_owned();
-        let status = format!("Logged in as {}.\n → Loading rooms...", logged_in_user_id);
-        enqueue_rooms_list_update(RoomsListUpdate::Status { status });
+    Cx::post_action(LoginAction::LoginSuccess);
 
-        // Store this active client in our global Client state so that other tasks can access it.
-        if let Some(_existing) = CLIENT.lock().unwrap().replace(client.clone()) {
-            error!("BUG: unexpectedly replaced an existing client when initializing the matrix client.");
-        }
+    // Deallocate the default SSO client after a successful login.
+    if let Ok(mut client_opt) = DEFAULT_SSO_CLIENT.lock() {
+        let _ = client_opt.take();
+    }
 
-        // Listen for changes to our verification status and incoming verification requests.
-        add_verification_event_handlers_and_sync_client(client.clone());
+    let logged_in_user_id = client.user_id()
+        .expect("BUG: client.user_id() returned None after successful login!");
+    let status = format!("Logged in as {}.\n → Loading rooms...", logged_in_user_id);
+    enqueue_rooms_list_update(RoomsListUpdate::Status { status });
 
-        // Listen for updates to the ignored user list.
-        handle_ignore_user_list_subscriber(client.clone());
+    // Store this active client in our global Client state so that other tasks can access it.
+    if let Some(_existing) = CLIENT.lock().unwrap().replace(client.clone()) {
+        error!("BUG: unexpectedly replaced an existing client when initializing the matrix client.");
+    }
 
-        // Listen for session changes, e.g., when the access token becomes invalid.
-        handle_session_changes(client.clone());
+    // Listen for changes to our verification status and incoming verification requests.
+    add_verification_event_handlers_and_sync_client(client.clone());
 
-        Cx::post_action(LoginAction::Status {
-            title: "Connecting".into(),
-            status: "Setting up sync service...".into(),
-        });
-        let sync_service = match SyncService::builder(client.clone())
-            .with_offline_mode()
-            .build()
-            .await
-        {
-            Ok(ss) => ss,
-            Err(e) => {
-                error!("Failed to create SyncService: {e:?}");
-                let err_msg = if is_invalid_token_error(&e) {
-                    "Your login token is no longer valid.\n\nPlease log in again.".to_string()
-                } else {
-                    format!("Please restart Robrix.\n\nFailed to create Matrix sync service: {e}.")
-                };
-                Cx::post_action(LoginAction::LoginFailure(err_msg.clone()));
-                enqueue_popup_notification(err_msg.clone(), PopupKind::Error, None);
-                enqueue_rooms_list_update(RoomsListUpdate::Status { status: err_msg });
-                // Clear the stored client so the next login attempt doesn't trigger the
-                // "unexpectedly replaced an existing client" warning.
-                let _ = CLIENT.lock().unwrap().take();
-                continue 'login_loop;
-            }
-        };
+    // Listen for updates to the ignored user list.
+    handle_ignore_user_list_subscriber(client.clone());
 
-        break 'login_loop (client, sync_service, logged_in_user_id);
+    let sync_service = match SyncService::builder(client.clone())
+        .with_offline_mode()
+        .build()
+        .await
+    {
+        Ok(ss) => ss,
+        Err(e) => {
+            error!("BUG: failed to create SyncService: {e:?}");
+            let err = format!("Please restart Robrix.\n\nFailed to create Matrix sync service: {e}.");
+            enqueue_popup_notification(
+                err.clone(),
+                PopupKind::Error,
+                None,
+            );
+            enqueue_rooms_list_update(RoomsListUpdate::Status { status: err });
+            return;
+        }
     };
 
-    // Signal login success now that SyncService::build() has already succeeded (inside
-    // 'login_loop), which is the only step that can fail with an invalid/expired token.
-    // Doing this before sync_service.start() lets the UI transition to the home screen
-    // without waiting for the sync loop to begin.
-    Cx::post_action(LoginAction::LoginSuccess);
-
     // Attempt to load the previously-saved app state.
     handle_load_app_state(logged_in_user_id.to_owned());
     handle_sync_indicator_subscriber(&sync_service);
     handle_sync_service_state_subscriber(sync_service.state());
     sync_service.start().await;
-
     let room_list_service = sync_service.room_list_service();
 
     if let Some(_existing) = SYNC_SERVICE.lock().unwrap().replace(Arc::new(sync_service)) {
@@ -3016,7 +2988,7 @@ async fn add_new_room(
             let invite_details = new_room.room.invite_details().await.ok();
             let room_name_id = RoomNameId::from((new_room.display_name.clone(), new_room.room_id.clone()));
             // Start with a basic text avatar; the avatar image will be fetched asynchronously below.
-            let room_avatar = avatar_from_room_name(room_name_id.name_for_avatar());
+            let room_avatar = avatar_from_room_name(room_name_id.name_for_avatar().as_deref());
             let inviter_info = if let Some(inviter) = invite_details.and_then(|d| d.inviter) {
                 Some(InviterInfo {
                     user_id: inviter.user_id().to_owned(),
@@ -3108,7 +3080,7 @@ async fn add_new_room(
     ).await;
     let room_name_id = RoomNameId::from((new_room.display_name.clone(), new_room.room_id.clone()));
     // Start with a basic text avatar; the avatar image will be fetched asynchronously below.
-    let room_avatar = avatar_from_room_name(room_name_id.name_for_avatar());
+    let room_avatar = avatar_from_room_name(room_name_id.name_for_avatar().as_deref());
     rooms_list::enqueue_rooms_list_update(RoomsListUpdate::AddJoinedRoom(JoinedRoomInfo {
         latest,
         tags: new_room.tags.clone().unwrap_or_default(),
@@ -3215,55 +3187,6 @@ fn handle_load_app_state(user_id: OwnedUserId) {
     });
 }
 
-/// Returns `true` if the given sync service error is due to an invalid/expired access token.
-fn is_invalid_token_error(e: &sync_service::Error) -> bool {
-    use matrix_sdk::ruma::api::client::error::ErrorKind;
-    let sdk_error = match e {
-        sync_service::Error::RoomList(
-            matrix_sdk_ui::room_list_service::Error::SlidingSync(err)
-        ) => err,
-        sync_service::Error::EncryptionSync(
-            encryption_sync_service::Error::SlidingSync(err)
-        ) => err,
-        _ => return false,
-    };
-    matches!(
-        sdk_error.client_api_error_kind(),
-        Some(ErrorKind::UnknownToken { .. } | ErrorKind::MissingToken)
-    )
-}
-
-/// Subscribes to session change notifications from the Matrix client.
-///
-/// When the homeserver rejects the access token with a 401 `M_UNKNOWN_TOKEN` error
-/// (e.g., the token was revoked or expired), this emits a [`LoginAction::LoginFailure`]
-/// so the user is prompted to log in again.
-fn handle_session_changes(client: Client) {
-    let mut receiver = client.subscribe_to_session_changes();
-    Handle::current().spawn(async move {
-        loop {
-            match receiver.recv().await {
-                Ok(SessionChange::UnknownToken { soft_logout }) => {
-                    let msg = if soft_logout {
-                        "Your login session has expired.\n\nPlease log in again."
-                    } else {
-                        "Your login token is no longer valid.\n\nPlease log in again."
-                    };
-                    error!("Session token is no longer valid (soft_logout: {soft_logout}). Prompting re-login.");
-                    Cx::post_action(LoginAction::LoginFailure(msg.to_string()));
-                }
-                Ok(SessionChange::TokensRefreshed) => {}
-                Err(broadcast::error::RecvError::Lagged(n)) => {
-                    warning!("Session change receiver lagged, missed {n} messages.");
-                }
-                Err(broadcast::error::RecvError::Closed) => {
-                    break;
-                }
-            }
-        }
-    });
-}
-
 fn handle_sync_service_state_subscriber(mut subscriber: Subscriber<sync_service::State>) {
     log!("Initial sync service state is {:?}", subscriber.get());
     Handle::current().spawn(async move {
@@ -3271,21 +3194,15 @@ fn handle_sync_service_state_subscriber(mut subscriber: Subscriber<sync_service:
             log!("Received a sync service state update: {state:?}");
             match state {
                 sync_service::State::Error(e) => {
-                    if is_invalid_token_error(&e) {
-                        // The access token is invalid; `handle_session_changes` will have
-                        // already posted a LoginAction::LoginFailure, so just log here.
-                        error!("Sync service stopped due to invalid/expired access token: {e}.");
+                    log!("Restarting sync service due to error: {e}.");
+                    if let Some(ss) = get_sync_service() {
+                        ss.start().await;
                     } else {
-                        log!("Restarting sync service due to error: {e}.");
-                        if let Some(ss) = get_sync_service() {
-                            ss.start().await;
-                        } else {
-                            enqueue_popup_notification(
-                                "Unable to restart the Matrix sync service.\n\nPlease quit and restart Robrix.",
-                                PopupKind::Error,
-                                None,
-                            );
-                        }
+                        enqueue_popup_notification(
+                            "Unable to restart the Matrix sync service.\n\nPlease quit and restart Robrix.",
+                            PopupKind::Error,
+                            None,
+                        );
                     }
                 }
                 other => Cx::post_action(RoomsListHeaderAction::StateUpdate(other)),
@@ -3955,7 +3872,7 @@ async fn room_avatar(room: &Room, room_name_id: &RoomNameId) -> FetchedRoomAvata
                     }
                 }
             }
-            utils::avatar_from_room_name(room_name_id.name_for_avatar())
+            utils::avatar_from_room_name(room_name_id.name_for_avatar().as_deref())
         }
     }
 }
diff --git a/src/tsp/create_did_modal.rs b/src/tsp/create_did_modal.rs
index f51e8bccb..4b09598d9 100644
--- a/src/tsp/create_did_modal.rs
+++ b/src/tsp/create_did_modal.rs
@@ -2,222 +2,249 @@
 
 use makepad_widgets::*;
 
-use crate::tsp;
+use crate::{shared::styles::*, tsp};
 
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.CreateDidModal = #(CreateDidModal::register_widget(vm)) {
+    pub CreateDidModal = {{CreateDidModal}} {
         width: Fit
         height: Fit
 
-        RoundedView {
+        <RoundedView> {
             width: 400
             height: Fit
-            align: Align{x: 0.5}
+            align: {x: 0.5}
             flow: Down
-            padding: Inset{top: 30, right: 25, bottom: 20, left: 25}
+            padding: {top: 30, right: 25, bottom: 20, left: 25}
 
             show_bg: true
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_PRIMARY)
                 border_radius: 4.0
             }
 
-            title_view := View {
+            title_view = <View> {
                 width: Fill,
                 height: Fit,
-                padding: Inset{top: 0, bottom: 25}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 25}
+                align: {x: 0.5, y: 0.0}
 
-                title := Label {
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 13},
+                title = <Label> {
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 13},
                         color: #000
+                        wrap: Word
                     }
                     text: "Create New Identity (DID)"
                 }
             }
 
-            RoundedView {
+            <RoundedView> {
                 width: 350,
                 height: Fit,
                 spacing: 15,
                 padding: 15,
-                align: Align{x: 0.5}
+                align: {x: 0.5}
                 flow: Down,
 
                 show_bg: true
-                draw_bg +: {
+                draw_bg: {
                     color: (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: Inset{top: 3, bottom: 3}
+                        padding: {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: Inset{top: 5, left: 2, right: 2, bottom: 2}
+                        padding: {top: 5, left: 2, right: 2, bottom: 2}
                         spacing: 0.0,
-                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
+                        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: #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: #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: Inset{top: 3, bottom: 3}
+                        padding: {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: Inset{top: 5, left: 2, right: 2, bottom: 2}
+                        padding: {top: 5, left: 2, right: 2, bottom: 2}
                         spacing: 0.0,
-                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
+                        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: #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: #C8C8C8 }
                         }
                     }
                 }
             }
 
-            View {
+            <View> {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: Inset{top: 20, bottom: 20}
-                align: Align{x: 1.0, y: 0.5}
+                padding: {top: 20, bottom: 20}
+                align: {x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button := RobrixNegativeIconButton {
+                cancel_button = <RobrixIconButton> {
                     width: 100,
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon.svg: (ICON_FORBIDDEN)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_FORBIDDEN)
+                        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)
+                    }
                     text: "Cancel"
+                    draw_text:{
+                        color: (COLOR_FG_DANGER_RED),
+                    }
                 }
 
-                accept_button := RobrixPositiveIconButton {
+                accept_button = <RobrixIconButton> {
                     width: 140
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon.svg: (ICON_CHECKMARK)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    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)
+                    }
                     text: "Create DID"
+                    draw_text:{
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
                 }
             }
 
-            status_label := Label {
+            status_label = <Label> {
                 width: Fill,
                 height: Fit,
                 padding: 0,
                 margin: 0,
-                flow: Flow.Right{wrap: true},
-                align: Align{x: 0.5, y: 0.0}
-                draw_text +: {
-                    text_style: REGULAR_TEXT {font_size: 11},
+                flow: RightWrap,
+                align: {x: 0.5, y: 0.0}
+                draw_text: {
+                    wrap: Word
+                    text_style: <REGULAR_TEXT>{font_size: 11},
                     color: #000
                 }
                 text: "status label"
@@ -250,7 +277,7 @@ enum CreateDidModalState {
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct CreateDidModal {
     #[deref] view: View,
     #[rust] state: CreateDidModalState,
@@ -270,8 +297,8 @@ impl Widget for CreateDidModal {
 
 impl WidgetMatchEvent for CreateDidModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let mut accept_button = self.view.button(cx, ids!(accept_button));
-        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let accept_button = self.view.button(ids!(accept_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -290,11 +317,11 @@ impl WidgetMatchEvent for CreateDidModal {
             return;
         }
 
-        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 mut status_label = self.view.label(cx, ids!(status_label));
+        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));
 
         // Handle clicking the accept button.
         let mut needs_redraw = false;
@@ -313,12 +340,12 @@ impl WidgetMatchEvent for CreateDidModal {
                     // Check to ensure that the user has entered all required fields.
                     if username.is_empty() {
                         self.is_showing_error = true;
-                        script_apply_eval!(cx, status_label, {
+                        status_label.apply_over(cx, live!(
                             text: "Please enter a DID username.",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_FG_DANGER_RED,
+                            draw_text: {
+                                color: (COLOR_FG_DANGER_RED),
                             },
-                        });
+                        ));
                     } else {
                         let alias = match alias_input.text().trim() {
                             "" => None,
@@ -343,12 +370,12 @@ impl WidgetMatchEvent for CreateDidModal {
 
                         self.state = CreateDidModalState::WaitingForIdentityCreation;
                         self.is_showing_error = false;
-                        script_apply_eval!(cx, status_label, {
+                        status_label.apply_over(cx, live!(
                             text: "Waiting for identity to be created and published...",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER,
+                            draw_text: {
+                                color: (COLOR_ACTIVE_PRIMARY_DARKER),
                             },
-                        });
+                        ));
                         accept_button.set_enabled(cx, false);
                         cancel_button.set_enabled(cx, false); // TODO: support canceling the identity creation request?
                         username_input.set_is_read_only(cx, true);
@@ -374,15 +401,15 @@ impl WidgetMatchEvent for CreateDidModal {
                 || did_server_input.changed(actions).is_some()
             {
                 self.is_showing_error = false;
-                self.view.label(cx, ids!(status_label)).set_text(cx, "");
+                self.view.label(ids!(status_label)).set_text(cx, "");
                 self.state = CreateDidModalState::WaitingForUserInput;
-                script_apply_eval!(cx, accept_button, {
+                accept_button.apply_over(cx, live!(
                     text: "Create DID",
                     enabled: true,
-                    draw_text +: {
-                        color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
+                    draw_text: {
+                        color: (COLOR_FG_ACCEPT_GREEN),
                     },
-                });
+                ));
                 needs_redraw = true;
             }
         }
@@ -393,25 +420,25 @@ impl WidgetMatchEvent for CreateDidModal {
                     self.state = CreateDidModalState::IdentityCreated;
                     self.is_showing_error = false;
                     let message = format!("Successfully created and published DID: \"{}\"", did);
-                    script_apply_eval!(cx, status_label, {
-                        text: #(message),
-                        draw_text +: {
-                            color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
+                    status_label.apply_over(cx, live!(
+                        text: (message),
+                        draw_text: {
+                            color: (COLOR_FG_ACCEPT_GREEN),
                         },
-                    });
-                    script_apply_eval!(cx, accept_button, {
+                    ));
+                    accept_button.apply_over(cx, live!(
                         enabled: true,
                         text: "Okay",
-                        draw_bg +: {
-                            color: mod.widgets.COLOR_ACTIVE_PRIMARY,
+                        draw_bg: {
+                            color: (COLOR_ACTIVE_PRIMARY),
                         },
-                        draw_icon +: {
-                            color: mod.widgets.COLOR_PRIMARY,
+                        draw_icon: {
+                            color: (COLOR_PRIMARY),
                         }
-                        draw_text +: {
-                            color: mod.widgets.COLOR_PRIMARY,
+                        draw_text: {
+                            color: (COLOR_PRIMARY),
                         },
-                    });
+                    ));
                     cancel_button.set_visible(cx, false);
                     needs_redraw = true;
                 }
@@ -422,12 +449,12 @@ impl WidgetMatchEvent for CreateDidModal {
                     self.state = CreateDidModalState::IdentityCreationError;
                     self.is_showing_error = true;
                     let message = format!("Failed to create DID: {e}");
-                    script_apply_eval!(cx, status_label, {
-                        text: #(message),
-                        draw_text +: {
-                            color: mod.widgets.COLOR_FG_DANGER_RED,
+                    status_label.apply_over(cx, live!(
+                        text: (message),
+                        draw_text: {
+                            color: (COLOR_FG_DANGER_RED),
                         },
-                    });
+                    ));
                     accept_button.set_enabled(cx, false);
                     cancel_button.set_enabled(cx, true);
                     username_input.set_is_read_only(cx, false);
@@ -450,8 +477,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(cx, ids!(accept_button));
-        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let accept_button = self.view.button(ids!(accept_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
         accept_button.set_text(cx, "Create DID");
         cancel_button.set_text(cx, "Cancel");
         accept_button.reset_hover(cx);
@@ -461,11 +488,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(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.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.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 79c477597..9b4e539c2 100644
--- a/src/tsp/create_wallet_modal.rs
+++ b/src/tsp/create_wallet_modal.rs
@@ -2,174 +2,201 @@
 
 use makepad_widgets::*;
 
-use crate::tsp::{self, TspWalletMetadata};
+use crate::{shared::styles::*, tsp::{self, TspWalletMetadata}};
 
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.CreateWalletModal = #(CreateWalletModal::register_widget(vm)) {
+    pub CreateWalletModal = {{CreateWalletModal}} {
         width: Fit
         height: Fit
 
-        RoundedView {
+        <RoundedView> {
             width: 400
             height: Fit
-            align: Align{x: 0.5}
+            align: {x: 0.5}
             flow: Down
-            padding: Inset{top: 30, right: 25, bottom: 20, left: 25}
+            padding: {top: 30, right: 25, bottom: 20, left: 25}
 
             show_bg: true
-            draw_bg +: {
+            draw_bg: {
                 color: (COLOR_PRIMARY)
-                border_radius: 4.0
+                border_radius: 4
             }
 
-            title_view := View {
+            title_view = <View> {
                 width: Fill,
                 height: Fit,
-                padding: Inset{top: 0, bottom: 25}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 25}
+                align: {x: 0.5, y: 0.0}
 
-                title := Label {
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
-                        text_style: TITLE_TEXT {font_size: 13},
+                title = <Label> {
+                    flow: RightWrap,
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 13},
                         color: #000
+                        wrap: Word
                     }
                     text: "Create New TSP Wallet"
                 }
             }
 
-            RoundedView {
+            <RoundedView> {
                 width: 350,
                 height: Fit,
                 spacing: 15,
                 padding: 15,
-                align: Align{x: 0.5}
+                align: {x: 0.5}
                 flow: Down,
 
                 show_bg: true
-                draw_bg +: {
+                draw_bg: {
                     color: (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: Inset{top: 3, bottom: 3}
+                        padding: {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: Inset{top: 5, left: 2, right: 2, bottom: 2}
+                        padding: {top: 5, left: 2, right: 2, bottom: 2}
                         spacing: 0.0,
-                        align: Align{x: 0.5, y: 0.5} // center horizontally and vertically
+                        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: #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: #C8C8C8 }
                         }
                     }
                 }
             }
 
-            View {
+            <View> {
                 width: Fill, height: Fit
                 flow: Right,
-                padding: Inset{top: 20, bottom: 20}
-                align: Align{x: 1.0, y: 0.5}
+                padding: {top: 20, bottom: 20}
+                align: {x: 1.0, y: 0.5}
                 spacing: 20
 
-                cancel_button := RobrixNegativeIconButton {
+                cancel_button = <RobrixIconButton> {
                     width: 100,
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon.svg: (ICON_FORBIDDEN)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    draw_icon: {
+                        svg_file: (ICON_FORBIDDEN)
+                        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)
+                    }
                     text: "Cancel"
+                    draw_text:{
+                        color: (COLOR_FG_DANGER_RED),
+                    }
                 }
 
-                accept_button := RobrixPositiveIconButton {
+                accept_button = <RobrixIconButton> {
                     width: 140
-                    align: Align{x: 0.5, y: 0.5}
+                    align: {x: 0.5, y: 0.5}
                     padding: 15,
-                    draw_icon.svg: (ICON_CHECKMARK)
-                    icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                    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)
+                    }
                     text: "Create Wallet"
+                    draw_text:{
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
                 }
             }
 
-            status_label := Label {
+            status_label = <Label> {
                 width: Fill,
                 height: Fit,
-                flow: Flow.Right{wrap: true},
-                align: Align{x: 0.5, y: 0.0}
-                draw_text +: {
-                    text_style: REGULAR_TEXT {font_size: 11},
+                flow: RightWrap,
+                align: {x: 0.5, y: 0.0}
+                draw_text: {
+                    wrap: Word
+                    text_style: <REGULAR_TEXT>{font_size: 11},
                     color: #000
                 }
                 text: "status label"
@@ -202,7 +229,7 @@ enum CreateWalletModalState {
 }
 
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct CreateWalletModal {
     #[deref] view: View,
     #[rust] state: CreateWalletModalState,
@@ -222,8 +249,8 @@ impl Widget for CreateWalletModal {
 
 impl WidgetMatchEvent for CreateWalletModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let mut accept_button = self.view.button(cx, ids!(accept_button));
-        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let accept_button = self.view.button(ids!(accept_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
 
         // Handle canceling/closing the modal.
         let cancel_clicked = cancel_button.clicked(actions);
@@ -242,11 +269,11 @@ impl WidgetMatchEvent for CreateWalletModal {
             return;
         }
 
-        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 mut status_label = self.view.label(cx, ids!(status_label));
+        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));
 
         // Handle clicking the accept button.
         let mut needs_redraw = false;
@@ -266,28 +293,28 @@ impl WidgetMatchEvent for CreateWalletModal {
                     // Check to ensure that the user has entered all required fields.
                     if password.is_empty() || confirm_password.is_empty() {
                         self.is_showing_error = true;
-                        script_apply_eval!(cx, status_label, {
+                        status_label.apply_over(cx, live!(
                             text: "Please enter a wallet password.",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_FG_DANGER_RED,
+                            draw_text: {
+                                color: (COLOR_FG_DANGER_RED),
                             },
-                        });
+                        ));
                     } else if password != confirm_password {
                         self.is_showing_error = true;
-                        script_apply_eval!(cx, status_label, {
+                        status_label.apply_over(cx, live!(
                             text: "Passwords do not match.",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_FG_DANGER_RED,
+                            draw_text: {
+                                color: (COLOR_FG_DANGER_RED),
                             },
-                        });
+                        ));
                     } else if wallet_name.is_empty() {
                         self.is_showing_error = true;
-                        script_apply_eval!(cx, status_label, {
+                        status_label.apply_over(cx, live!(
                             text: "Please enter a wallet name.",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_FG_DANGER_RED,
+                            draw_text: {
+                                color: (COLOR_FG_DANGER_RED),
                             },
-                        });
+                        ));
                     } else {
                         let url = tsp::TspWalletSqliteUrl::from_wallet_file_name(
                             match wallet_file_name_input.text() {
@@ -305,12 +332,12 @@ impl WidgetMatchEvent for CreateWalletModal {
                         tsp::submit_tsp_request(tsp::TspRequest::CreateWallet { metadata });
                         self.state = CreateWalletModalState::WaitingForWalletCreation;
                         self.is_showing_error = false;
-                        script_apply_eval!(cx, status_label, {
+                        status_label.apply_over(cx, live!(
                             text: "Waiting for wallet to be created...",
-                            draw_text +: {
-                                color: mod.widgets.COLOR_ACTIVE_PRIMARY_DARKER,
+                            draw_text: {
+                                color: (COLOR_ACTIVE_PRIMARY_DARKER),
                             },
-                        });
+                        ));
                         accept_button.set_enabled(cx, false);
                         cancel_button.set_enabled(cx, false); // TODO: support canceling the wallet creation request?
                         wallet_name_input.set_is_read_only(cx, true);
@@ -335,15 +362,15 @@ impl WidgetMatchEvent for CreateWalletModal {
                 || confirm_password_input.changed(actions).is_some()
             {
                 self.is_showing_error = false;
-                self.view.label(cx, ids!(status_label)).set_text(cx, "");
+                self.view.label(ids!(status_label)).set_text(cx, "");
                 self.state = CreateWalletModalState::WaitingForUserInput;
-                script_apply_eval!(cx, accept_button, {
+                accept_button.apply_over(cx, live!(
                     text: "Create Wallet",
                     enabled: true,
-                    draw_text +: {
-                        color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
+                    draw_text: {
+                        color: (COLOR_FG_ACCEPT_GREEN),
                     },
-                });
+                ));
                 needs_redraw = true;
             }
         }
@@ -365,25 +392,25 @@ impl WidgetMatchEvent for CreateWalletModal {
                     } else {
                         format!("Wallet \"{}\" created successfully.", metadata.wallet_name)
                     };
-                    script_apply_eval!(cx, status_label, {
-                        text: #(message),
-                        draw_text +: {
-                            color: mod.widgets.COLOR_FG_ACCEPT_GREEN,
+                    status_label.apply_over(cx, live!(
+                        text: (message),
+                        draw_text: {
+                            color: (COLOR_FG_ACCEPT_GREEN),
                         },
-                    });
-                    script_apply_eval!(cx, accept_button, {
+                    ));
+                    accept_button.apply_over(cx, live!(
                         enabled: true,
                         text: "Okay",
-                        draw_bg +: {
-                            color: mod.widgets.COLOR_ACTIVE_PRIMARY,
+                        draw_bg: {
+                            color: (COLOR_ACTIVE_PRIMARY),
                         },
-                        draw_icon +: {
-                            color: mod.widgets.COLOR_PRIMARY,
+                        draw_icon: {
+                            color: (COLOR_PRIMARY),
                         }
-                        draw_text +: {
-                            color: mod.widgets.COLOR_PRIMARY,
+                        draw_text: {
+                            color: (COLOR_PRIMARY),
                         },
-                    });
+                    ));
                     cancel_button.set_visible(cx, false);
                 }
 
@@ -392,12 +419,12 @@ impl WidgetMatchEvent for CreateWalletModal {
                     self.state = CreateWalletModalState::WalletCreationError;
                     self.is_showing_error = true;
                     let message = format!("Failed to create wallet: {error}.");
-                    script_apply_eval!(cx, status_label, {
-                        text: #(message),
-                        draw_text +: {
-                            color: mod.widgets.COLOR_FG_DANGER_RED,
+                    status_label.apply_over(cx, live!(
+                        text: (message),
+                        draw_text: {
+                            color: (COLOR_FG_DANGER_RED),
                         },
-                    });
+                    ));
                     accept_button.set_enabled(cx, false);
                     cancel_button.set_enabled(cx, true);
                     wallet_name_input.set_is_read_only(cx, false);
@@ -419,8 +446,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(cx, ids!(accept_button));
-        let cancel_button = self.view.button(cx, ids!(cancel_button));
+        let accept_button = self.view.button(ids!(accept_button));
+        let cancel_button = self.view.button(ids!(cancel_button));
         accept_button.set_text(cx, "Create Wallet");
         cancel_button.set_text(cx, "Cancel");
         accept_button.reset_hover(cx);
@@ -430,11 +457,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(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.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.is_showing_error = false;
         self.view.redraw(cx);        
     }
diff --git a/src/tsp/mod.rs b/src/tsp/mod.rs
index 17335d889..d360acb57 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 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);
+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);
 }
 
 /// The sender used by [`submit_tsp_request()`] to send TSP requests to the async worker thread.
@@ -70,9 +70,9 @@ struct ReceiveLoopTask {
 
 
 /// The global singleton TSP state, storing all known TSP wallets.
-static TSP_STATE: OnceLock<Mutex<TspState>> = OnceLock::new();
+static TSP_STATE: Mutex<TspState> = Mutex::new(TspState::new());
 pub fn tsp_state_ref() -> &'static Mutex<TspState> {
-    TSP_STATE.get_or_init(|| Mutex::new(TspState::new()))
+    &TSP_STATE
 }
 
 /// The current actively-used (singleton) state of TSP wallets known to Robrix.
@@ -95,14 +95,14 @@ pub struct TspState {
     pending_verification_requests: SmallVec<[TspVerificationDetails; 1]>,
 }
 impl TspState {
-    fn new() -> Self {
+    const fn new() -> Self {
         Self {
             current_wallet: None,
             other_wallets: Vec::new(),
             current_local_vid: None,
             associations: BTreeMap::new(),
             receive_loop_tasks: BTreeMap::new(),
-            pending_verification_requests: SmallVec::new(),
+            pending_verification_requests: SmallVec::new_const(),
         }
     }
 
@@ -174,7 +174,7 @@ impl TspState {
             current_local_vid,
             associations: saved_state.associations,
             receive_loop_tasks: BTreeMap::new(),
-            pending_verification_requests: SmallVec::new(),
+            pending_verification_requests: SmallVec::new_const(),
         })
     }
 
@@ -470,7 +470,7 @@ async fn inner_tsp_init() -> anyhow::Result<()> {
             &private_vid,
         );
     }
-    *tsp_state_ref().lock().unwrap() = new_tsp_state;
+    *TSP_STATE.lock().unwrap() = new_tsp_state;
     Ok(())
 }
 
diff --git a/src/tsp/sign_anycast_checkbox.rs b/src/tsp/sign_anycast_checkbox.rs
index 8634c05ee..031025da0 100644
--- a/src/tsp/sign_anycast_checkbox.rs
+++ b/src/tsp/sign_anycast_checkbox.rs
@@ -3,14 +3,15 @@
 
 use makepad_widgets::*;
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
 
-    mod.widgets.TspSignAnycastCheckbox = CheckBoxFlat {
+    pub TspSignAnycastCheckbox = <CheckBoxFlat> {
         text: "TSP",
         active: false,
     }
diff --git a/src/tsp/tsp_settings_screen.rs b/src/tsp/tsp_settings_screen.rs
index 83d0e6f87..141379f90 100644
--- a/src/tsp/tsp_settings_screen.rs
+++ b/src/tsp/tsp_settings_screen.rs
@@ -5,91 +5,114 @@ use crate::{shared::{popup_list::{enqueue_popup_notification, PopupKind}, styles
 
 const REPUBLISH_IDENTITY_BUTTON_TEXT: &str = "Republish Current Identity to DID Server";
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    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::tsp::wallet_entry::*;
 
-    mod.widgets.REPUBLISH_IDENTITY_BUTTON_TEXT = "Republish Current Identity to DID Server"
+    REPUBLISH_IDENTITY_BUTTON_TEXT = "Republish Current Identity to DID Server"
 
     // The view containing all TSP-related settings.
-    mod.widgets.TspSettingsScreen = #(TspSettingsScreen::register_widget(vm)) {
+    pub TspSettingsScreen = {{TspSettingsScreen}} {
         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 := RobrixNeutralIconButton {
-                margin: Inset{left: 5}
+            copy_identity_button = <RobrixIconButton> {
+                margin: {left: 5}
                 padding: 12,
                 spacing: 0,
-                draw_icon.svg: (ICON_COPY)
-                icon_walk: Walk{width: 16, height: 16, margin: Inset{right: -2} }
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_COPY)
+                }
+                icon_walk: {width: 16, height: 16, margin: {right: -2} }
             }
 
-            current_identity_label := Label {
+            current_identity_label = <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true},
-                margin: Inset{top: 10}
-                draw_text +: {
-                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
+                flow: RightWrap,
+                margin: {top: 10}
+                draw_text: {
+                    wrap: Line,
+                    text_style: <MESSAGE_TEXT_STYLE>{ font_size: 11 },
                 }
             }
         }
 
-        republish_identity_button := RobrixIconButton {
+        republish_identity_button = <RobrixIconButton> {
             width: Fit, height: Fit,
             padding: 10,
-            margin: Inset{top: 8, bottom: 10, left: 5},
-            draw_bg.border_radius: 5.0
-            draw_icon.svg: (ICON_UPLOAD)
-            icon_walk: Walk{width: 16, height: 16}
+            margin: {top: 8, bottom: 10, left: 5},
+
+            draw_bg: {
+                color: (COLOR_ACTIVE_PRIMARY),
+                border_radius: 5
+            }
+            draw_icon: {
+                svg_file: (ICON_UPLOAD)
+                color: (COLOR_PRIMARY),
+            }
+            icon_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: Inset{top: 10, bottom: 8, left: 13, right: 10},
-                flow: Flow.Right{wrap: true},
-                draw_text +: {
-                    color: (COLOR_TEXT_WARNING_NOT_FOUND),
-                    text_style: MESSAGE_TEXT_STYLE { font_size: 11 },
+                margin: {top: 10, bottom: 8, left: 13, right: 10},
+                flow: RightWrap,
+                draw_text: {
+                    wrap: Line,
+                    color: (COLOR_WARNING_NOT_FOUND),
+                    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
-                border_radius: 4.0
+            draw_bg: {
+                color: #F6F8F9,
+                border_radius: 4.0,
             }
 
-            wallet_list := FlatList {
+            wallet_list = <FlatList> {
                 width: Fill,
                 height: Fit,
                 spacing: 0.0
@@ -99,48 +122,77 @@ script_mod! {
                 drag_scrolling: true,
                 scroll_bars: { show_scroll_x: false, show_scroll_y: false },
 
-                wallet_entry := WalletEntry { }
+                wallet_entry = <WalletEntry> { }
             }
         }
 
-        View {
-            margin: Inset{top: 5},
+        <View> {
+            margin: {top: 5},
             width: Fill, height: Fit
-            flow: Flow.Right{wrap: true},
-            align: Align{y: 0.5},
+            flow: RightWrap,
+            align: {y: 0.5},
             spacing: 10
 
-            create_did_button := RobrixPositiveIconButton {
+            create_did_button = <RobrixIconButton> {
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: Inset{left: 5},
-                draw_bg.border_radius: 5.0
-                draw_icon.svg: (ICON_ADD_USER)
-                icon_walk: Walk{width: 21, height: Fit, margin: 0}
+                margin: {left: 5},
+
+                draw_bg: {
+                    border_color: (COLOR_FG_ACCEPT_GREEN),
+                    color: (COLOR_BG_ACCEPT_GREEN),
+                    border_radius: 5
+                }
+                draw_icon: {
+                    svg_file: (ICON_ADD_USER)
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
+                icon_walk: {width: 21, height: Fit, margin: 0}
+                draw_text: {
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
                 text: "Create New Identity (DID)"
             }
 
-            create_wallet_button := RobrixPositiveIconButton {
+            create_wallet_button = <RobrixIconButton> {
                 width: Fit, height: Fit,
                 padding: 10,
-                margin: Inset{left: 5},
-                draw_bg.border_radius: 5.0
-                draw_icon.svg: (ICON_ADD_WALLET)
-                icon_walk: Walk{width: 21, height: Fit, margin: 0}
+                margin: {left: 5},
+
+                draw_bg: {
+                    border_color: (COLOR_FG_ACCEPT_GREEN),
+                    color: (COLOR_BG_ACCEPT_GREEN),
+                    border_radius: 5
+                }
+                draw_icon: {
+                    svg_file: (ICON_ADD_WALLET)
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
+                icon_walk: {width: 21, height: Fit, margin: 0}
+                draw_text: {
+                    color: (COLOR_FG_ACCEPT_GREEN),
+                }
                 text: "Create New Wallet"
             }
 
-            import_wallet_button := RobrixIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                margin: Inset{left: 5}
+            import_wallet_button = <RobrixIconButton> {
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
+                margin: {left: 5}
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_text: {
+                    color: (COLOR_PRIMARY)
+                    text_style: <REGULAR_TEXT> {}
+                }
                 text: "Import Existing Wallet"
                 // TODO: fix this icon, or pick a different SVG
-                // draw_icon +: {
-                //     svg: (ICON_IMPORT)
+                // draw_icon: {
+                //     svg_file: (ICON_IMPORT)
                 //     color: (COLOR_PRIMARY)
                 // }
-                // icon_walk: Walk{width: 16, height: 16}
-                icon_walk: Walk{width: 0, height: 0}
+                // icon_walk: {width: 16, height: 16}
+                icon_walk: {width: 0, height: 0}
             }
         }
     }
@@ -196,7 +248,7 @@ impl WalletStatusAndDefault {
 }
 
 /// The view containing all TSP-related settings.
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TspSettingsScreen {
     #[deref] view: View,
 
@@ -230,20 +282,19 @@ impl Widget for TspSettingsScreen {
         let (current_did_text, current_did_text_color, show_republish_button) = match
             self.wallets.as_ref().and_then(|ws| ws.active_identity.as_deref())
         {
-            Some(current_did) => (current_did.to_string(), COLOR_FG_ACCEPT_GREEN, true),
-            None => ("No default identity has been set.".to_string(), COLOR_TEXT_WARNING_NOT_FOUND, false),
+            Some(current_did) => (current_did, COLOR_FG_ACCEPT_GREEN, true),
+            None => ("No default identity has been set.", COLOR_WARNING_NOT_FOUND, false),
         };
-        let mut current_identity_label = self.view.label(cx, ids!(current_identity_label));
-        script_apply_eval!(cx, current_identity_label, {
-            text: #(current_did_text),
-            draw_text +: { color: #(current_did_text_color) },
-        });
-        self.view.button(cx, ids!(republish_identity_button)).set_visible(cx, show_republish_button);
+        self.view.label(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);
 
 
         // 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(cx, ids!(no_wallets_label)).set_visible(cx, is_wallets_empty);
+        self.view.view(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.
@@ -271,7 +322,7 @@ impl Widget for TspSettingsScreen {
 
 impl MatchEvent for TspSettingsScreen {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let mut republish_identity_button = self.view.button(cx, ids!(republish_identity_button));
+        let republish_identity_button = self.view.button(ids!(republish_identity_button));
 
         for action in actions {
             match action.downcast_ref() {
@@ -379,10 +430,10 @@ impl MatchEvent for TspSettingsScreen {
                 }
                 Some(TspIdentityAction::DidRepublishResult(result)) => {
                     // restore the republish button to its original state.
-                    script_apply_eval!(cx, republish_identity_button, {
+                    republish_identity_button.apply_over(cx, live!(
                         enabled: true,
-                        text: #(REPUBLISH_IDENTITY_BUTTON_TEXT),
-                    });
+                        text: (REPUBLISH_IDENTITY_BUTTON_TEXT),
+                    ));
                     match result {
                         Ok(did) => {
                             enqueue_popup_notification(
@@ -411,7 +462,7 @@ impl MatchEvent for TspSettingsScreen {
         }
 
 
-        if self.view.button(cx, ids!(copy_identity_button)).clicked(actions) { 
+        if self.view.button(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(
@@ -431,13 +482,13 @@ 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(cx, ids!(republish_identity_button)).clicked(actions) {
+        if self.view.button(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()) {
-                    script_apply_eval!(cx, republish_identity_button, {
+                    republish_identity_button.apply_over(cx, live!(
                         enabled: false,
                         text: "Republishing DID now...",
-                    });
+                    ));
 
                     submit_tsp_request(TspRequest::RepublishDid { did: our_did.to_string() });
                 } else {
@@ -450,17 +501,17 @@ impl MatchEvent for TspSettingsScreen {
             }
         }
 
-        if self.view.button(cx, ids!(create_wallet_button)).clicked(actions) {
+        if self.view.button(ids!(create_wallet_button)).clicked(actions) {
             cx.action(CreateWalletModalAction::Open);
         }
 
-        if self.view.button(cx, ids!(create_did_button)).clicked(actions) {
+        if self.view.button(ids!(create_did_button)).clicked(actions) {
             if self.has_default_wallet() {
                 cx.action(CreateDidModalAction::Open);
             }
         }
 
-        if self.view.button(cx, ids!(import_wallet_button)).clicked(actions) {
+        if self.view.button(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 2c95bd168..69cbf9d0c 100644
--- a/src/tsp/tsp_sign_indicator.rs
+++ b/src/tsp/tsp_sign_indicator.rs
@@ -2,27 +2,29 @@
 
 use makepad_widgets::*;
 
-use crate::shared::styles::*;
+use crate::shared::{callout_tooltip::{CalloutTooltipOptions, TooltipAction}, styles::*};
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
 
-    mod.widgets.TspSignIndicator = #(TspSignIndicator::register_widget(vm)) {
+    pub TspSignIndicator = {{TspSignIndicator}} {
         visible: false, // default to hidden
         width: Fit, height: Fit
         flow: Right,
         padding: 0,
-        margin: Inset{ top: 5 }
+        margin: { 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: MouseCursor.Hand,
+        // cursor: Hand,
 
-        tsp_html := Html {
+        tsp_html = <Html> {
             width: Fit, height: Fit
             flow: Right, // do not wrap
             padding: 0,
@@ -59,7 +61,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(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TspSignIndicator {
     #[deref] view: View,
     #[rust] state: TspSignState,
@@ -79,7 +81,7 @@ impl Widget for TspSignIndicator {
             //     false
             // },
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(self.widget_uid(),  TooltipAction::HoverOut);
+                cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
                 false
             }
             _ => false,
@@ -100,7 +102,8 @@ impl Widget for TspSignIndicator {
                 ),
             };
             cx.widget_action(
-                self.widget_uid(), 
+                self.widget_uid(),
+                &scope.path,
                 TooltipAction::HoverIn {
                     text: text.to_string(),
                     widget_rect: area.rect(cx),
@@ -121,7 +124,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(cx, ids!(tsp_html));
+        let tsp_html_ref = self.view.html(ids!(tsp_html));
         if let Some(mut tsp_html) = tsp_html_ref.borrow_mut() {
             let (text, font_color) = match state {
                 TspSignState::Unknown => {
@@ -154,11 +157,10 @@ impl TspSignIndicatorRef {
 
 
 /// Actions emitted by an `TspSignIndicator` widget.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 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 95a97089d..fa79eca84 100644
--- a/src/tsp/tsp_verification_modal.rs
+++ b/src/tsp/tsp_verification_modal.rs
@@ -2,85 +2,109 @@
 use makepad_widgets::*;
 use tsp_sdk::AsyncSecureStore;
 
-use crate::{sliding_sync::current_user_id, tsp::{submit_tsp_request, TspRequest, TspVerificationDetails}};
+use crate::{shared::styles::*, sliding_sync::current_user_id, tsp::{submit_tsp_request, TspRequest, TspVerificationDetails}};
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.TspVerificationModal = #(TspVerificationModal::register_widget(vm)) {
+    pub TspVerificationModal = {{TspVerificationModal}} {
         width: Fit
         height: Fit
 
-        RoundedView {
+        <RoundedView> {
             flow: Down
             width: 400
             height: Fit
-            padding: Inset{top: 25, right: 30 bottom: 30 left: 45}
+            padding: {top: 25, right: 30 bottom: 30 left: 45}
             spacing: 10
 
             show_bg: true
-            draw_bg +: {
-                color: (COLOR_PRIMARY)
+            draw_bg: {
+                color: #fff
                 border_radius: 3.0
             }
 
-            title := View {
+            title = <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: Inset{top: 0, bottom: 40}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 40}
+                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
-                    flow: Flow.Right{wrap: true}
-                    draw_text +: {
-                        text_style: REGULAR_TEXT {
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{
                             font_size: 11.5,
                         },
                         color: #000
+                        wrap: Word
                     }
                 }
 
-                View {
+                <View> {
                     width: Fill, height: Fit
                     flow: Right,
-                    align: Align{x: 1.0, y: 0.5}
+                    align: {x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button := RobrixNegativeIconButton {
-                        align: Align{x: 0.5, y: 0.5}
+                    cancel_button = <RobrixIconButton> {
+                        align: {x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon.svg: (ICON_FORBIDDEN)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        draw_icon: {
+                            svg_file: (ICON_FORBIDDEN)
+                            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)
+                        }
                         text: "Ignore Request"
+                        draw_text:{
+                            color: (COLOR_FG_DANGER_RED),
+                        }
                     }
 
-                    accept_button := RobrixPositiveIconButton {
-                        align: Align{x: 0.5, y: 0.5}
+                    accept_button = <RobrixIconButton> {
+                        align: {x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon.svg: (ICON_CHECKMARK)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        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)
+                        }
                         text: "Accept Request"
+                        draw_text:{
+                            color: (COLOR_FG_ACCEPT_GREEN),
+                        }
                     }
                 }
             }
@@ -88,7 +112,7 @@ script_mod! {
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TspVerificationModal {
     #[deref] view: View,
     #[rust] state: TspVerificationModalState,
@@ -145,8 +169,8 @@ impl Widget for TspVerificationModal {
 
 impl WidgetMatchEvent for TspVerificationModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        let mut accept_button = self.button(cx, ids!(accept_button));
-        let cancel_button = self.button(cx, ids!(cancel_button));
+        let accept_button = self.button(ids!(accept_button));
+        let cancel_button = self.button(ids!(cancel_button));
 
         let cancel_button_clicked = cancel_button.clicked(actions);
         let modal_dismissed = actions
@@ -175,7 +199,7 @@ impl WidgetMatchEvent for TspVerificationModal {
             return;
         }
 
-        let prompt_label = self.view.label(cx, ids!(prompt));
+        let prompt_label = self.view.label(ids!(prompt));
         if accept_button.clicked(actions) {
             let current_state = std::mem::take(&mut self.state);
             let new_state: TspVerificationModalState;
@@ -211,18 +235,18 @@ impl WidgetMatchEvent for TspVerificationModal {
                             accepted: false,
                         });
                         cancel_button.set_visible(cx, false);
-                        script_apply_eval!(cx, accept_button, {
+                        accept_button.apply_over(cx, live!(
                             text: "Okay",
-                            draw_bg +: {
-                                color: mod.widgets.COLOR_ACTIVE_PRIMARY,
+                            draw_bg: {
+                                color: (COLOR_ACTIVE_PRIMARY),
                             },
-                            draw_icon +: {
-                                color: mod.widgets.COLOR_PRIMARY,
+                            draw_icon: {
+                                color: (COLOR_PRIMARY),
                             }
-                            draw_text +: {
-                                color: mod.widgets.COLOR_PRIMARY,
+                            draw_text: {
+                                color: (COLOR_PRIMARY),
                             },
-                        });
+                        ));
                         new_state = TspVerificationModalState::RequestDeclined;
                     }
                     else {
@@ -268,28 +292,28 @@ impl WidgetMatchEvent for TspVerificationModal {
                 {
                     match result {
                         Ok(()) => {
-                            self.label(cx, ids!(prompt)).set_text(cx, "The TSP verification process has completed successfully.\n\nYou may now close this.");
+                            self.label(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(cx, ids!(prompt)).set_text(cx, &format!("Error: failed to complete the TSP verification process:\n\n{e}"));
+                            self.label(ids!(prompt)).set_text(cx, &format!("Error: failed to complete the TSP verification process:\n\n{e}"));
                             self.state = TspVerificationModalState::RequestDeclined;
                         }
                     }
                     cancel_button.set_visible(cx, false);
-                    script_apply_eval!(cx, accept_button, {
+                    accept_button.apply_over(cx, live!(
                         enabled: true,
                         text: "Okay",
-                        draw_bg +: {
-                            color: mod.widgets.COLOR_ACTIVE_PRIMARY,
+                        draw_bg: {
+                            color: (COLOR_ACTIVE_PRIMARY),
                         },
-                        draw_icon +: {
-                            color: mod.widgets.COLOR_PRIMARY,
+                        draw_icon: {
+                            color: (COLOR_PRIMARY),
                         }
-                        draw_text +: {
-                            color: mod.widgets.COLOR_PRIMARY,
+                        draw_text: {
+                            color: (COLOR_PRIMARY),
                         }
-                    });
+                    ));
                     self.redraw(cx);
                 }
                 _ => {}
@@ -315,10 +339,10 @@ impl TspVerificationModal {
             details.responding_vid,
             details.responding_user_id,
         );
-        self.label(cx, ids!(prompt)).set_text(cx, &prompt_text);
+        self.label(ids!(prompt)).set_text(cx, &prompt_text);
 
-        let accept_button = self.button(cx, ids!(accept_button));
-        let cancel_button = self.button(cx, ids!(cancel_button));
+        let accept_button = self.button(ids!(accept_button));
+        let cancel_button = self.button(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 e41593f43..39f43e3d3 100644
--- a/src/tsp/verify_user.rs
+++ b/src/tsp/verify_user.rs
@@ -4,96 +4,124 @@ use matrix_sdk::ruma::OwnedUserId;
 
 use crate::{shared::popup_list::{enqueue_popup_notification, PopupKind}, tsp::{submit_tsp_request, tsp_state_ref, TspIdentityAction, TspRequest}};
 
-script_mod! {
+live_design! {
     link tsp_enabled
 
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+    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::*;
 
     // 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.
-    mod.widgets.TspVerifyUser = #(TspVerifyUser::register_widget(vm)) {
+    pub TspVerifyUser = {{TspVerifyUser}} {
         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: Inset{ left: 10, right: 10, bottom: 10}
+            padding: { left: 10, right: 10, bottom: 10}
 
-            Label {
+            <Label> {
                 width: Fill, height: Fit
-                flow: Flow.Right{wrap: true}
-                draw_text +: {
-                    text_style: USERNAME_TEXT_STYLE { font_size: 11.5 },
+                draw_text: {
+                    wrap: Word,
+                    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: Inset{ left: 7 }
+                // margin: { left: 7 }
 
-                Label {
+                <Label> {
                     width: Fill, height: Fit
-                    flow: Flow.Right{wrap: true}
-                    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 := RobrixTextInput {
+                tsp_did_read_only_input = <SimpleTextInput> {
                     is_read_only: true
                 }
 
-                remove_tsp_association_button := RobrixNegativeIconButton {
-                    padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                    draw_icon.svg: (ICON_CLOSE)
-                    icon_walk: Walk{width: 22, height: 16, margin: Inset{left: -5, right: -3, top: 1, bottom: -1} }
+                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)
+                    }
+                    draw_icon: {
+                        svg_file: (ICON_CLOSE)
+                        color: (COLOR_FG_DANGER_RED),
+                    }
+                    draw_text: {
+                        color: (COLOR_FG_DANGER_RED),
+                        text_style: <REGULAR_TEXT> {}
+                    }
+                    icon_walk: {width: 22, height: 16, margin: {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: Inset{ left: 7 }
+                // margin: { left: 7 }
 
-                Label {
+                <Label> {
                     width: Fill, height: Fit
-                    flow: Flow.Right{wrap: true},
-                    draw_text +: {
+                    flow: RightWrap,
+                    draw_text: {
+                        wrap: Word,
                         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 := RobrixTextInput {
+                tsp_did_input = <SimpleTextInput> {
                     empty_text: "Enter their TSP DID..."
                 }
 
-                verify_user_button := RobrixPositiveIconButton {
-                    padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                    draw_icon.svg: (ICON_CHECKMARK)
-                    icon_walk: Walk{width: 22, height: 16, margin: Inset{left: -5, right: -3, top: 1, bottom: -1} }
+                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)
+                    }
+                    draw_icon: {
+                        svg_file: (ICON_CHECKMARK)
+                        color: (COLOR_FG_ACCEPT_GREEN),
+                    }
+                    draw_text: {
+                        color: (COLOR_FG_ACCEPT_GREEN)
+                        text_style: <REGULAR_TEXT> {}
+                    }
+                    icon_walk: {width: 22, height: 16, margin: {left: -5, right: -3, top: 1, bottom: -1} }
                     text: "Verify this user via TSP"
                 }
             }
@@ -111,7 +139,7 @@ pub enum TspVerifiedInfo {
     },
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct TspVerifyUser {
     #[deref] view: View,
     /// The Matrix User ID of the other user that we want to verify.
@@ -132,7 +160,7 @@ impl Widget for TspVerifyUser {
 }
 impl MatchEvent for TspVerifyUser {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        if self.view.button(cx, ids!(remove_tsp_association_button)).clicked(actions) {
+        if self.view.button(ids!(remove_tsp_association_button)).clicked(actions) {
             enqueue_popup_notification(
                 "Removing a TSP association is not yet implemented",
                 PopupKind::Warning,
@@ -140,9 +168,9 @@ impl MatchEvent for TspVerifyUser {
             );
         }
 
-        let verify_user_button = self.view.button(cx, ids!(verify_user_button));
+        let verify_user_button = self.view.button(ids!(verify_user_button));
         if verify_user_button.clicked(actions) {
-            let did_input = self.view.view(cx, ids!(tsp_did_input));
+            let did_input = self.view.view(ids!(tsp_did_input));
             let did = did_input.text().trim().to_string();
             log!("verify_user_button was clicked. DID: {}", did);
             if did.is_empty() {
@@ -211,19 +239,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(cx, ids!(verified_tsp));
-        let unverified_tsp_view = self.view.view(cx, ids!(unverified_tsp));
+        let verified_tsp_view = self.view.view(ids!(verified_tsp));
+        let unverified_tsp_view = self.view.view(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(cx, ids!(tsp_did_read_only_input)).set_text(cx, did);
+                verified_tsp_view.text_input(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(cx, ids!(tsp_did_input)).set_text(cx, "");
-                let verify_user_button = unverified_tsp_view.button(cx, ids!(verify_user_button));
+                unverified_tsp_view.text_input(ids!(tsp_did_input)).set_text(cx, "");
+                let verify_user_button = unverified_tsp_view.button(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 2c2de8ab4..b40ab4205 100644
--- a/src/tsp/wallet_entry/mod.rs
+++ b/src/tsp/wallet_entry/mod.rs
@@ -9,108 +9,143 @@ use crate::{
     tsp::{submit_tsp_request, tsp_settings_screen::{WalletStatus, WalletStatusAndDefault}, TspRequest, TspWalletMetadata}
 };
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+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::*;
 
     // An entry in the list of wallets.
-    mod.widgets.WalletEntry = #(WalletEntry::register_widget(vm)) {
+    pub WalletEntry = {{WalletEntry}} {
         width: Fill, height: Fit
         flow: Down
 
-        View {
+        <View> {
             width: Fill, height: Fit
-            flow: Flow.Right{wrap: true},
+            flow: RightWrap,
             padding: 10
 
-            wallet_name := Label {
+            wallet_name = <Label> {
                 width: Fit, height: Fit
                 flow: Right,
-                margin: Inset{top: 2.4, left: 0}
-                draw_text +: {
+                margin: {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: Inset{top: 2.9, left: 8, bottom: 2}
-                draw_text +: {
+                margin: {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: Inset{left: 20}
-                Label {
-                    margin: Inset{top: 2.9}
+                margin: {left: 20}
+                <Label> {
+                    margin: {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: Inset{left: 20}
-                Label {
-                    margin: Inset{top: 2.9}
+                margin: {left: 20}
+                <Label> {
+                    margin: {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: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                margin: Inset{left: 20}
-                draw_icon.svg: (ICON_CHECKMARK)
-                icon_walk: Walk{width: 16, height: 16}
+            set_default_wallet_button = <RobrixIconButton> {
+                padding: {top: 10, bottom: 10, left: 12, right: 15}
+                margin: {left: 20}
+                draw_bg: {
+                    color: (COLOR_ACTIVE_PRIMARY)
+                }
+                draw_icon: {
+                    svg_file: (ICON_CHECKMARK)
+                    color: (COLOR_PRIMARY)
+                }
+                draw_text: {
+                    color: (COLOR_PRIMARY)
+                    text_style: <REGULAR_TEXT> {}
+                }
+                icon_walk: {width: 16, height: 16}
                 text: "Set As Default"
             }
 
-            remove_wallet_button := RobrixNegativeIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                margin: Inset{left: 20}
-                draw_icon.svg: (ICON_CLOSE)
-                icon_walk: Walk{ width: 16, height: 16 }
+            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)
+                }
+                draw_icon: {
+                    svg_file: (ICON_CLOSE),
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                draw_text: {
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                icon_walk: { width: 16, height: 16 }
                 text: "Remove From List"
             }
 
-            delete_wallet_button := RobrixNegativeIconButton {
-                padding: Inset{top: 10, bottom: 10, left: 12, right: 15}
-                margin: Inset{left: 20}
-                draw_icon.svg: (ICON_TRASH)
-                icon_walk: Walk{ width: 16, height: 16 }
+            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)
+                }
+                draw_icon: {
+                    svg_file: (ICON_TRASH),
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                draw_text: {
+                    color: (COLOR_FG_DANGER_RED),
+                }
+                icon_walk: { width: 16, height: 16 }
                 text: "Delete Wallet"
             }
         }
 
-        LineH { padding: 10, margin: Inset{left: 5, right: 5} }
+        <LineH> { padding: 10, margin: {left: 5, right: 5} }
     }
 
 }
 
 
 /// A view showing the details of a single TSP wallet (one entry in the wallets list).
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct WalletEntry {
     #[deref] view: View,
 
@@ -123,11 +158,11 @@ impl Widget for WalletEntry {
 
         let Some(metadata) = self.metadata.as_ref() else { return };
         if let Event::Actions(actions) = event {
-            if self.view.button(cx, ids!(set_default_wallet_button)).clicked(actions) {
+            if self.view.button(ids!(set_default_wallet_button)).clicked(actions) {
                 submit_tsp_request(TspRequest::SetDefaultWallet(metadata.clone()));
             }
 
-            if self.view.button(cx, ids!(remove_wallet_button)).clicked(actions) {
+            if self.view.button(ids!(remove_wallet_button)).clicked(actions) {
                 let metadata_clone = metadata.clone();
                 let content = ConfirmationModalContent {
                     title_text: "Remove Wallet".into(),
@@ -145,7 +180,7 @@ impl Widget for WalletEntry {
                 cx.action(ConfirmDeleteAction::Show(RefCell::new(Some(content))));
             }
 
-            if self.view.button(cx, ids!(delete_wallet_button)).clicked(actions) {
+            if self.view.button(ids!(delete_wallet_button)).clicked(actions) {
                 // TODO: Implement the delete wallet feature.
                 enqueue_popup_notification(
                     "Delete wallet feature is not yet implemented.",
@@ -165,11 +200,11 @@ impl Widget for WalletEntry {
             self.metadata = Some(metadata.clone());
         }
 
-        self.label(cx, ids!(wallet_name)).set_text(
+        self.label(ids!(wallet_name)).set_text(
             cx,
             &metadata.wallet_name,
         );
-        self.label(cx, ids!(wallet_path)).set_text(
+        self.label(ids!(wallet_path)).set_text(
             cx,
             metadata.url.as_url_unencoded()
         );
@@ -178,19 +213,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(cx, ids!(is_default_label_view)).set_visible(
+        self.view(ids!(is_default_label_view)).set_visible(
             cx,
             sd.is_default
         );
-        self.view(cx, ids!(not_found_label_view)).set_visible(
+        self.label(ids!(not_found_label_view)).set_visible(
             cx,
             sd.status == WalletStatus::NotFound,
         );
-        self.button(cx, ids!(set_default_wallet_button)).set_visible(
+        self.button(ids!(set_default_wallet_button)).set_visible(
             cx,
             !sd.is_default && sd.status != WalletStatus::NotFound,
         );
-        self.button(cx, ids!(delete_wallet_button)).set_visible(
+        self.button(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 c9451f506..df0a0f278 100644
--- a/src/tsp_dummy/mod.rs
+++ b/src/tsp_dummy/mod.rs
@@ -18,55 +18,61 @@
 
 use makepad_widgets::*;
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    link tsp_disabled
 
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
 
-    mod.widgets.TspSettingsScreen = View {
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+
+    pub TspSettingsScreen = <View> {
         width: Fill, height: Fit
         flow: Down
-        align: Align{x: 0}
+        align: {x: 0}
 
-        TitleLabel {
+        <TitleLabel> {
             text: "TSP Wallet Settings"
         }
 
-        Label {
+        <Label> {
             width: Fill, height: Fit
-            flow: Flow.Right{wrap: true},
-            align: Align{x: 0}
-            margin: Inset{top: 10, bottom: 10}
-            draw_text +: {
+            flow: RightWrap,
+            align: {x: 0}
+            margin: {top: 10, bottom: 10}
+            draw_text: {
+                wrap: Word,
                 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."
         }
     }
 
-    mod.widgets.CreateWalletModal = View {
+    pub CreateWalletModal = <View> {
         visible: false,
     }
 
-    mod.widgets.CreateDidModal = View {
+    pub CreateDidModal = <View> {
         visible: false,
     }
 
-    mod.widgets.TspVerifyUser = View {
+    pub TspVerifyUser = <View> {
         height: 50
         width: Fill,
     }
 
-    mod.widgets.TspVerificationModal = View {
+    pub TspVerificationModal = <View> {
         visible: false
     }
 
-    mod.widgets.TspSignAnycastCheckbox = View {
+    pub TspSignAnycastCheckbox = <View> {
         visible: false
     }
 
-    mod.widgets.TspSignIndicator = View {
+    pub TspSignIndicator = <View> {
         visible: false
     }
 }
diff --git a/src/utils.rs b/src/utils.rs
index aa3ac8143..42c08828e 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -138,52 +138,6 @@ pub fn load_png_or_jpg(img: &ImageRef, cx: &mut Cx, data: &[u8]) -> Result<(), I
 }
 
 
-/// Parses a CSS-style hex color string into a `Vec4` with RGBA components in `[0.0, 1.0]`.
-///
-/// Supports the following formats (with or without a leading `#`):
-/// * 3 hex digits: `RGB` (each digit is doubled, alpha = 1.0)
-/// * 4 hex digits: `RGBA` (each digit is doubled)
-/// * 6 hex digits: `RRGGBB` (alpha = 1.0)
-/// * 8 hex digits: `RRGGBBAA`
-pub fn vec4_from_hex_str(s: &str) -> Option<makepad_widgets::Vec4> {
-    let s = s.strip_prefix('#').unwrap_or(s);
-    let (r, g, b, a) = match s.len() {
-        3 => {
-            let r = u8::from_str_radix(&s[0..1], 16).ok()?;
-            let g = u8::from_str_radix(&s[1..2], 16).ok()?;
-            let b = u8::from_str_radix(&s[2..3], 16).ok()?;
-            (r * 17, g * 17, b * 17, 255)
-        }
-        4 => {
-            let r = u8::from_str_radix(&s[0..1], 16).ok()?;
-            let g = u8::from_str_radix(&s[1..2], 16).ok()?;
-            let b = u8::from_str_radix(&s[2..3], 16).ok()?;
-            let a = u8::from_str_radix(&s[3..4], 16).ok()?;
-            (r * 17, g * 17, b * 17, a * 17)
-        }
-        6 => {
-            let r = u8::from_str_radix(&s[0..2], 16).ok()?;
-            let g = u8::from_str_radix(&s[2..4], 16).ok()?;
-            let b = u8::from_str_radix(&s[4..6], 16).ok()?;
-            (r, g, b, 255)
-        }
-        8 => {
-            let r = u8::from_str_radix(&s[0..2], 16).ok()?;
-            let g = u8::from_str_radix(&s[2..4], 16).ok()?;
-            let b = u8::from_str_radix(&s[4..6], 16).ok()?;
-            let a = u8::from_str_radix(&s[6..8], 16).ok()?;
-            (r, g, b, a)
-        }
-        _ => return None,
-    };
-    Some(makepad_widgets::vec4(
-        r as f32 / 255.0,
-        g as f32 / 255.0,
-        b as f32 / 255.0,
-        a as f32 / 255.0,
-    ))
-}
-
 /// A simplified version of `eyeball_im::VectorDiff` that uses `Vec` instead of `imbl::Vector`.
 ///
 /// This is used to communicate room order changes from the room list service to the RoomsList widget.
@@ -917,14 +871,13 @@ impl RoomNameId {
     /// For `EmptyWas`, returns the previous name (preserving the old name for avatar).
     /// For other variants, returns the string representation.
     /// Unlike `Display::to_string()`, this does NOT fall back to the room ID for Empty names.
-    pub fn name_for_avatar(&self) -> Option<&str> {
+    pub fn name_for_avatar(&self) -> Option<String> {
         match &self.display_name {
             RoomDisplayName::Empty => None,
-            // Use previous name so that avatars show "A" for "Empty(was Alice)", not "E".
-            RoomDisplayName::EmptyWas(name)
-            | RoomDisplayName::Aliased(name)
-            | RoomDisplayName::Calculated(name)
-            | RoomDisplayName::Named(name) => Some(name.as_str()),
+            // Preserve the previous name for avatar generation
+            // so "EmptyWas(Alice)" shows "A" not "E"
+            RoomDisplayName::EmptyWas(name) => Some(name.clone()),
+            other => Some(other.to_string()),
         }
     }
 
diff --git a/src/verification.rs b/src/verification.rs
index 85e503f02..2cf7bc329 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, Cx};
+use makepad_widgets::{log, ActionDefaultRef, Cx, DefaultNone};
 use matrix_sdk_base::crypto::{AcceptedProtocols, CancelInfo, EmojiShortAuthString};
 use matrix_sdk::{
     encryption::{
@@ -14,10 +14,9 @@ use matrix_sdk::{
 };
 use tokio::{runtime::Handle, sync::mpsc::{UnboundedReceiver, UnboundedSender}};
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum VerificationStateAction {
     Update(VerificationState),
-    #[default]
     None,
 }
 
@@ -253,7 +252,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, Default)]
+#[derive(Clone, Debug, DefaultNone)]
 pub enum VerificationAction {
     /// Informs the main UI thread that a verification request has been received.
     RequestReceived(VerificationRequestActionState),
@@ -289,7 +288,6 @@ 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 2dcdc78db..e306f05f7 100644
--- a/src/verification_modal.rs
+++ b/src/verification_modal.rs
@@ -5,81 +5,105 @@ use matrix_sdk::encryption::verification::Verification;
 
 use crate::verification::{VerificationAction, VerificationRequestActionState, VerificationUserResponse};
 
-script_mod! {
-    use mod.prelude.widgets.*
-    use mod.widgets.*
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
 
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
 
-    mod.widgets.VerificationModal = #(VerificationModal::register_widget(vm)) {
+    pub VerificationModal = {{VerificationModal}} {
         width: Fit
         height: Fit
 
-        RoundedView {
+        <RoundedView> {
             flow: Down
             width: 400
             height: Fit
-            padding: Inset{top: 25, right: 30 bottom: 30 left: 45}
+            padding: {top: 25, right: 30 bottom: 30 left: 45}
             spacing: 10
 
             show_bg: true
-            draw_bg +: {
-                color: (COLOR_PRIMARY)
+            draw_bg: {
+                color: #fff
                 border_radius: 3.0
             }
 
-            title := View {
+            title = <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right
-                padding: Inset{top: 0, bottom: 40}
-                align: Align{x: 0.5, y: 0.0}
+                padding: {top: 0, bottom: 40}
+                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
-                    flow: Flow.Right{wrap: true}
-                    draw_text +: {
-                        text_style: REGULAR_TEXT {
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{
                             font_size: 11.5,
                         },
                         color: #000
+                        wrap: Word
                     }
                 }
 
-                View {
+                <View> {
                     width: Fill, height: Fit
                     flow: Right,
-                    align: Align{x: 1.0, y: 0.5}
+                    align: {x: 1.0, y: 0.5}
                     spacing: 20
 
-                    cancel_button := RobrixNegativeIconButton {
-                        align: Align{x: 0.5, y: 0.5}
+                    cancel_button = <RobrixIconButton> {
+                        align: {x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon.svg: (ICON_FORBIDDEN)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        draw_icon: {
+                            svg_file: (ICON_FORBIDDEN)
+                            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)
+                        }
                         text: "Cancel"
+                        draw_text:{
+                            color: (COLOR_FG_DANGER_RED),
+                        }
                     }
 
-                    accept_button := RobrixPositiveIconButton {
-                        align: Align{x: 0.5, y: 0.5}
+                    accept_button = <RobrixIconButton> {
+                        align: {x: 0.5, y: 0.5}
                         padding: 15,
-                        draw_icon.svg: (ICON_CHECKMARK)
-                        icon_walk: Walk{width: 16, height: 16, margin: Inset{left: -2, right: -1} }
+                        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)
+                        }
                         text: "Yes"
+                        draw_text:{
+                            color: (COLOR_FG_ACCEPT_GREEN),
+                        }
                     }
                 }
             }
@@ -87,7 +111,7 @@ script_mod! {
     }
 }
 
-#[derive(Script, ScriptHook, Widget)]
+#[derive(Live, LiveHook, Widget)]
 pub struct VerificationModal {
     #[deref] view: View,
     #[rust] state: Option<VerificationRequestActionState>,
@@ -116,8 +140,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(cx, ids!(accept_button));
-        let cancel_button = self.button(cx, ids!(cancel_button));
+        let accept_button = self.button(ids!(accept_button));
+        let cancel_button = self.button(ids!(cancel_button));
 
         let cancel_button_clicked = cancel_button.clicked(actions);
         let modal_dismissed = actions
@@ -156,7 +180,7 @@ impl WidgetMatchEvent for VerificationModal {
             if let Some(verification_action) = action.downcast_ref::<VerificationAction>() {
                 match verification_action {
                     VerificationAction::RequestCancelled(cancel_info) => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             &format!("Verification request was cancelled: {}", cancel_info.reason())
                         );
@@ -167,7 +191,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestAccepted => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             "You successfully accepted the verification request.\n\n\
                             Waiting for the other device to agree on verification methods..."
@@ -180,7 +204,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestAcceptError(error) => {
-                        self.label(cx, ids!(prompt)).set_text(cx, 
+                        self.label(ids!(prompt)).set_text(cx,
                             &format!(
                                 "Error accepting verification request: {}\n\n\
                                 Please try the verification process again.",
@@ -194,7 +218,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestCancelError(error) => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             &format!("Error cancelling verification request: {}.", error)
                         );
@@ -205,7 +229,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestTransitionedToUnsupportedMethod(method) => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             &format!(
                                 "Verification request transitioned to unsupported method: {}\n\nPlease try the verification process again.",
@@ -223,7 +247,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::SasAccepted(_accepted_protocols) => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             "Both sides have accepted the same verification method(s).\n\n\
                             Waiting for both devices to exchange keys..."
@@ -255,7 +279,7 @@ impl WidgetMatchEvent for VerificationModal {
                                 decimals.0, decimals.1, decimals.2,
                             )
                         };
-                        self.label(cx, ids!(prompt)).set_text(cx, &text);
+                        self.label(ids!(prompt)).set_text(cx, &text);
                         accept_button.set_enabled(cx, true);
                         accept_button.set_text(cx, "Yes");
                         cancel_button.set_text(cx, "No");
@@ -264,7 +288,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::SasConfirmed => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             "You successfully confirmed the Short Auth String keys.\n\n\
                             Waiting for the other device to confirm..."
@@ -277,7 +301,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::SasConfirmationError(error) => {
-                        self.label(cx, ids!(prompt)).set_text(
+                        self.label(ids!(prompt)).set_text(
                             cx,
                             &format!("Error confirming keys: {}\n\nPlease retry the verification process.", error)
                         );
@@ -288,7 +312,7 @@ impl WidgetMatchEvent for VerificationModal {
                     }
 
                     VerificationAction::RequestCompleted => {
-                        self.label(cx, ids!(prompt)).set_text(cx, "Verification completed successfully!");
+                        self.label(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);
@@ -334,10 +358,10 @@ impl VerificationModal {
                 ).into()
             }
         };
-        self.label(cx, ids!(prompt)).set_text(cx, &prompt_text);
+        self.label(ids!(prompt)).set_text(cx, &prompt_text);
 
-        let accept_button = self.button(cx, ids!(accept_button));
-        let cancel_button = self.button(cx, ids!(cancel_button));
+        let accept_button = self.button(ids!(accept_button));
+        let cancel_button = self.button(ids!(cancel_button));
         accept_button.set_text(cx, "Yes");
         accept_button.set_enabled(cx, true);
         accept_button.set_visible(cx, true);